import { CloseOutlined } from "@ant-design/icons";
import { Button, Drawer, Grid } from "antd";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import ProText from "components/ProText";
import { useState } from "react";
import { useAppSelector } from "redux/hooks";
import { componentBackground, darkComponentBackground } from "ThemeConstants";
import useHeaderMenu from "./hooks/useHeaderMenu";

const {useBreakpoint} = Grid;

export default function HeaderMenuDrawer() {
  const { isRTL, locale } = useAppSelector((state) => state.locale);
  const {themeName} = useAppSelector(state => state.theme)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const { menuItems } = useHeaderMenu();
  const {xs } = useBreakpoint();
  const isMobile = xs
  const closeMobileMenu = () => setMobileMenuOpen(false);

  const mobileMenuLinkStyle = (isActive: boolean): React.CSSProperties => ({
    display: "flex",
    alignItems: "center",
    gap: 16,
    padding: "10px 20px",
    borderRadius: 12,
    fontSize: 14,
    fontWeight: isActive ? 600 : 400,
    marginBottom: 4,
    color: "#1f2937",
  });

  const actionButtonStyle: React.CSSProperties = {
    height: 32, // isMobile ? 44 : 40,
    minWidth: 32, //isMobile ? 44 : "auto",
    width: 32, //isMobile ? 44 : "auto",
    borderRadius: 8,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: isMobile ? 0 : 8,
    backgroundColor: "none",
  };

  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          position: "fixed",
          zIndex: 999,
          [isRTL ? "left" : "right"]: 0,
          top: "30%",
          backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
          [isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
          [isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
          border:
            themeName === "dark" ? "1px solid #374151" : "1px solid #FDF1D9",
        }}
      >
        <Button
          type="text"
          icon={isRTL ? <NextIcon /> : <BackIcon />}
          onClick={() => setMobileMenuOpen(true)}
          style={actionButtonStyle}
        />
      </div>
      <Drawer
        placement={isRTL ? "left" : "right"}
        maskClosable={false}
        onClose={closeMobileMenu}
        open={mobileMenuOpen}
        width={isMobile ? "50%" : "25%"}
        styles={{
          body: {
            padding: 0,
          },
          header: {
            padding: "5px 24px",
            borderBottom: `1px solid ${
              themeName === "dark" ? "#374151" : "#e5e7eb"
            }`,
          },
        }}
        closeIcon={null}
      >
        <div className="mobile-drawer-content">
          <div
            style={{
              width: 32,
              height: 32,
              backgroundColor: "#5F6C7B1F",
              borderRadius: "50%",
              gap: 10,
              [isRTL ? "marginRight" : "marginLeft"]: "80%",
              marginTop: "50px",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
            }}
          >
            <CloseOutlined
              onClick={() => {
                closeMobileMenu();
              }}
            />
          </div>
          {/* Navigation Links */}
          <div className="mobile-drawer-section">
            <div style={{ display: "flex", flexDirection: "column" }}>
              {menuItems.map((item) => (
                <div
                  key={item.key}
                  onClick={() => {
                    closeMobileMenu();
                    item.onClick?.();
                  }}
                >
                  <div
                    key={item.key}
                    style={mobileMenuLinkStyle(locale === item.key)}
                  >
                    {item.icon}
                    <ProText>{item.label.props.children}</ProText>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Drawer>
    </>
  );
}