import { Button, Typography, Layout } from "antd";
import BackIcon from "components/Icons/BackIcon";
import { FunctionComponent, ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { ProBlack2 } from "ThemeConstants";
import ProTitle from "../ProTitle";
import useBreakPoint from "hooks/useBreakPoint";
import NextIcon from "components/Icons/NextIcon";

const { Text } = Typography;

interface ProHeaderProps {
  children?: ReactNode;
  isReactNode?: boolean;
  navigateBack?: boolean;
  customRoute?: string;
}

const ProHeader: FunctionComponent<ProHeaderProps> = ({
  children,
  isReactNode,
  customRoute,
  ...other
}) => {
  const { themeName } = useAppSelector((state) => state.theme);
  const { isRTL } = useAppSelector((state) => state.locale);
  const { isMobile } = useBreakPoint();
  const router = useNavigate();

  const handleBack = () => {
    if (customRoute) {
      router(customRoute);
    } else {
      router(-1);
    }
  };

  return (
    <Layout.Header
      style={{
        position: "sticky",
        top: 0,
        display: "flex",
        zIndex: 1000,
        justifyContent: "space-between",
        alignItems: "center", // This centers vertically
        backgroundColor: themeName === "light" ? "white" : ProBlack2,
        height: isMobile ? "8vh" : "6vh", // Set a fixed height for the container
        padding: "4px 16px 0px 16px", // Add some horizontal padding
        width: "100%",
      }}
    >
      <Button
        type="text"
        icon={isRTL ? <NextIcon /> : <BackIcon />}
        style={{
          flex: 0, // Don't allow this to grow
        }}
        onClick={handleBack}
      />

      {!isReactNode ? (
        <>
          <div
            style={{
              position: "absolute", // Absolute positioning
              left: "50%", // Center horizontally
              transform: "translateX(-50%)", // Adjust for exact center
              marginTop: 10,
              boxSizing: "border-box", // Explicit box model definition
            }}
          >
            <Text
              style={{
                textAlign: "center",
              }}
              {...other}
            >
              <ProTitle
                level={5}
                style={{
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 16,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#333333",
                }}
              >
                {children}
              </ProTitle>
            </Text>
          </div>

          <div
            style={{
              position: "absolute", // Absolute positioning
              left: "50%", // Center horizontally
              transform: "translateX(-50%)", // Adjust for exact center
              marginTop: 10,
              boxSizing: "border-box", // Explicit box model definition
            }}
          >
            <Text
              style={{
                textAlign: "center",
              }}
              {...other}
            >
              <ProTitle
                level={5}
                style={{
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 16,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#333333",
                }}
              >
                {children}
              </ProTitle>
            </Text>
          </div>
        </>
      ) : (
        children
      )}
    </Layout.Header>
  );
};

export default ProHeader;
