import {
    BgColorsOutlined,
    HomeOutlined,
    LoginOutlined,
    LogoutOutlined,
    MenuOutlined,
    TranslationOutlined,
} from "@ant-design/icons";
import { logoutThunk } from "features/auth/authSlice";
import { setLocale, setLocalesThunk } from "features/locale/localeSlice";
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: (
        <TranslationOutlined
          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: (
        <HomeOutlined
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
      label: <Link to={`/${subdomain}/orders`}>{t("common.myOrder")}</Link>,
      onClick: () => {
        navigate(`/${subdomain}/orders`);
      },
    },
    {
      key: "branches",
      icon: (
        <MenuOutlined
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
      label: <Link to={`/${subdomain}/menu`}>{t("common.branches")}</Link>,
    },
    ...(!token ? [{
      key: "login",
      icon: (
        <LoginOutlined
          style={{ color: themeName === "dark" ? "white" : "#1f2937" }}
        />
      ),
      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());
      },
    }] : []),
  ];
  return { menuItems };
}