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 { useGetMenuQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import useHeaderMenu from "./hooks/useHeaderMenu";
import "./styles.css";

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",
  };

  const { restaurant } = useAppSelector((state) => state.order);

  const { isLoading: isLoadingMenu } = useGetMenuQuery(
    restaurant?.restautantId,
    {
      skip: !restaurant?.restautantId,
    },
  );
  return (
    <>
      {!isLoadingMenu && (
        <div className="header-floating-btn">
          <Button
            type="text"
            icon={isRTL ? <NextIcon /> : <BackIcon />}
            onClick={() => setMobileMenuOpen(true)}
            style={actionButtonStyle}
          />
        </div>
      )}
      <Drawer
        placement={isRTL ? "left" : "right"}
        maskClosable={false}
        onClose={closeMobileMenu}
        open={mobileMenuOpen}
        styles={{
          body: {
            padding: 0,
          },
          header: {
            padding: "5px 24px",
            borderBottom: `1px solid ${
              themeName === "dark" ? "#374151" : "#e5e7eb"
            }`,
          },
          wrapper: {
            width: isMobile ? "50%" : "25%",
          },
        }}
        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
                      style={{
                        fontWeight: 500,
                        fontStyle: "Medium",
                        fontSize: 12,
                        lineHeight: "140%",
                        letterSpacing: 0,
                        color: "#333333",
                      }}
                    >
                      {item.label.props.children}
                    </ProText>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Drawer>
    </>
  );
}