import {
  BgColorsOutlined,
  GlobalOutlined,
  LogoutOutlined,
} from "@ant-design/icons";
import BranchesIcon from "components/Icons/BranchesIcon";
import LoginIcon from "components/Icons/LoginIcon";
import LoyaltyAndRewardIcon from "components/Icons/LoyaltyAndRewardIcon";
import MyOrderIcon from "components/Icons/MyOrderIcon";
import { logoutThunk } from "features/auth/authSlice";
import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
import { clearCart } from "features/order/orderSlice";
import { toggleTheme } from "features/theme/themeSlice";
import i18n from "i18n/i18n";
import { useTranslation } from "react-i18next";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { ACCESS_TOKEN } from "utils/constants";

export default function useHeaderMenu() {
  const { subdomain } = useParams();
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { themeName } = useAppSelector((state) => state.theme);
  const navigate = useNavigate();
  const token = localStorage.getItem(ACCESS_TOKEN);

  const menuItems = [
    {
      key: "language",
      icon: (
        <GlobalOutlined
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
      label: <div>{isRTL ? t("common.arabic") : t("common.english")}</div>,
      onClick: () => {
        const key = isRTL ? "en" : "ar";
        dispatch(setLocale(key));
        dispatch(setLocalesThunk(key));
        i18n.changeLanguage(key);
      },
    },
    {
      key: "theme",
      icon: (
        <BgColorsOutlined
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
      label: (
        <div>
          {themeName === "light" ? t("common.dark") : t("common.light")}
        </div>
      ),
      onClick: () => {
        dispatch(toggleTheme());
      },
    },
    {
      key: "orders",
      icon: <MyOrderIcon />,
      label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
      onClick: () => {
        navigate(`/${subdomain}/orders`);
      },
    },
    {
      key: "rewardsAndLoyalty",
      icon: <LoyaltyAndRewardIcon />,
      label: (
        <Link to={`/${subdomain}/rewards-and-loyalty`}>
          {t("common.rewardsAndLoyalty")}
        </Link>
      ),
      onClick: () => {
        navigate(`/${subdomain}/rewards-and-loyalty`);
      },
    },
    {
      key: "branches",
      icon: <BranchesIcon />,
      label: <Link to={`/${subdomain}/menu`}>{t("common.branches")}</Link>,
    },
    ...(!token
      ? [
          {
            key: "login",
            icon: <LoginIcon />,
            label: <Link to={`/${subdomain}/login`}>{t("common.login")}</Link>,
            onClick: () => {
              navigate(`/${subdomain}/login`);
            },
          },
        ]
      : []),
    ...(token
      ? [
          {
            key: "logout",
            icon: (
              <LogoutOutlined
                style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
              />
            ),
            label: <div>{t("common.logout")}</div>,
            onClick: () => {
              dispatch(logoutThunk());
              dispatch(clearCart());
            },
          },
        ]
      : []),
  ];
  return { menuItems };
}