import { create } from "zustand"

// TODO: When MyPagesMobileMenu is removed, also remove the
// isMyPagesMobileMenuOpen state and toggleMyPagesMobileMenu function
interface DropdownState {
  isHamburgerMenuOpen: boolean
  isMyPagesMobileMenuOpen: boolean
  isMyPagesMenuOpen: boolean
  isHeaderLanguageSwitcherOpen: boolean
  isFooterLanguageSwitcherOpen: boolean
  toggleHamburgerMenu: () => void
  toggleMyPagesMobileMenu: () => void
  toggleMyPagesMenu: () => void
  toggleLanguageSwitcher: (location: "header" | "footer") => void
}

const useDropdownStore = create<DropdownState>((set) => ({
  isHamburgerMenuOpen: false,
  isMyPagesMobileMenuOpen: false,
  isMyPagesMenuOpen: false,
  isHeaderLanguageSwitcherOpen: false,
  isFooterLanguageSwitcherOpen: false,
  toggleHamburgerMenu: () =>
    set(
      ({ isHamburgerMenuOpen, isMyPagesMenuOpen, isMyPagesMobileMenuOpen }) => {
        // Close the other dropdowns if they're open
        if (!isHamburgerMenuOpen) {
          if (isMyPagesMenuOpen) {
            set({ isMyPagesMenuOpen: false })
          }
          if (isMyPagesMobileMenuOpen) {
            set({ isMyPagesMobileMenuOpen: false })
          }
        }
        return { isHamburgerMenuOpen: !isHamburgerMenuOpen }
      }
    ),
  toggleMyPagesMobileMenu: () =>
    set(
      ({
        isMyPagesMenuOpen,
        isMyPagesMobileMenuOpen,
        isHamburgerMenuOpen,
        isHeaderLanguageSwitcherOpen,
        isFooterLanguageSwitcherOpen,
      }) => {
        // Close the other dropdowns if they're open
        if (!isMyPagesMobileMenuOpen) {
          if (isMyPagesMenuOpen) {
            set({ isMyPagesMenuOpen: false })
          }
          if (isHamburgerMenuOpen) {
            set({ isHamburgerMenuOpen: false })
          }
          if (isHeaderLanguageSwitcherOpen) {
            set({ isHeaderLanguageSwitcherOpen: false })
          }
          if (isFooterLanguageSwitcherOpen) {
            set({ isFooterLanguageSwitcherOpen: false })
          }
        }
        return { isMyPagesMobileMenuOpen: !isMyPagesMobileMenuOpen }
      }
    ),
  toggleMyPagesMenu: () =>
    set(
      ({
        isHamburgerMenuOpen,
        isHeaderLanguageSwitcherOpen,
        isFooterLanguageSwitcherOpen,
        isMyPagesMenuOpen,
        isMyPagesMobileMenuOpen,
      }) => {
        // Close the other dropdowns if they're open
        if (!isMyPagesMenuOpen) {
          if (isHamburgerMenuOpen) {
            set({ isHamburgerMenuOpen: false })
          }
          if (isMyPagesMobileMenuOpen) {
            set({ isMyPagesMobileMenuOpen: false })
          }
          if (isHeaderLanguageSwitcherOpen) {
            set({ isHeaderLanguageSwitcherOpen: false })
          }
          if (isFooterLanguageSwitcherOpen) {
            set({ isFooterLanguageSwitcherOpen: false })
          }
        }
        return { isMyPagesMenuOpen: !isMyPagesMenuOpen }
      }
    ),
  toggleLanguageSwitcher: (location: "header" | "footer") =>
    set((state) => {
      const isCurrentlyOpen =
        location === "header"
          ? state.isHeaderLanguageSwitcherOpen
          : state.isFooterLanguageSwitcherOpen

      if (!isCurrentlyOpen) {
        return {
          isHeaderLanguageSwitcherOpen: location === "header",
          isFooterLanguageSwitcherOpen: location === "footer",
          isMyPagesMenuOpen: false,
          isMyPagesMobileMenuOpen: false,
          isHamburgerMenuOpen: false,
        }
      }

      return {
        isHeaderLanguageSwitcherOpen:
          location === "header" ? false : state.isHeaderLanguageSwitcherOpen,
        isFooterLanguageSwitcherOpen:
          location === "footer" ? false : state.isFooterLanguageSwitcherOpen,
      }
    }),
}))

export default useDropdownStore