"use client"

import { useIntl } from "react-intl"

import useDropdownStore from "@/stores/main-menu"

import { ChevronDownIcon } from "@/components/Icons"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { getInitials } from "@/utils/user"

import Avatar from "../Avatar"
import MainMenuButton from "../MainMenuButton"
import MyPagesMenuContent from "../MyPagesMenuContent"

import styles from "./myPagesMenu.module.css"

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"

export default function MyPagesMenu({
  membership,
  navigation,
  user,
}: MyPagesMenuProps) {
  const intl = useIntl()

  const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()

  useHandleKeyUp((event: KeyboardEvent) => {
    if (event.key === "Escape" && isMyPagesMenuOpen) {
      toggleDropdown(DropdownTypeEnum.MyPagesMenu)
    }
  })

  return (
    <div className={styles.myPagesMenu}>
      <MainMenuButton
        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
      >
        <Avatar initials={getInitials(user.firstName, user.lastName)} />
        <Subtitle type="two">
          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
        </Subtitle>
        <ChevronDownIcon
          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
          color="red"
        />
      </MainMenuButton>
      {isMyPagesMenuOpen ? (
        <div className={styles.dropdown}>
          <MyPagesMenuContent
            navigation={navigation}
            user={user}
            membership={membership}
            toggleOpenStateFn={() =>
              toggleDropdown(DropdownTypeEnum.MyPagesMenu)
            }
          />
        </div>
      ) : null}
    </div>
  )
}