"use client"

import styles from './styles.module.scss'
import MenuIcon from './menu.svg'
import Image from 'next/image'
import classNames from 'classnames'
import {Menu as MenuType, MenuItem as MenuItemType} from "./menu.types"
import { Logo } from '@/components/Logo/Logo'
import { useCallback, useState } from 'react'
import { MegaMenu } from '@/components/MegaMenu/MegaMenu'
import { CollapsibleArrow } from '@/components/CollapsibleArrow/CollapsibleArrow'

type MenuItemProps = MenuItemType & {
  onItemClick?: () => void
}

const MenuItem = ({text, href, display = "normal", megaMenu, onItemClick}: MenuItemProps) => {
  const className = classNames({
    [styles.menuLink]: display === "normal",
    [styles.button]: display === "button"
  });

  const [isActive, setIsActive] = useState<boolean>(false);
  const itemClicked = useCallback(() => {
    setIsActive(false);
    if (onItemClick) {
      onItemClick();
    }
  }, [setIsActive, onItemClick]);

  return (
    <span
      className={styles.menuItem}
      onMouseEnter={() => setIsActive(true)}
      onMouseLeave={() => setIsActive(false)}
    >
      <a className={className} href={href}>
        {text} {megaMenu && <CollapsibleArrow direction={isActive ? "UP" : "DOWN"} stroke={1.5} /> }
      </a>

      {megaMenu &&
        <div
          className={classNames({
          [styles.megaMenu]: true,
          [styles.megaMenuActive]: isActive
        })}
        >
          <MegaMenu
            bibleText={megaMenu.text.quote}
            bibleBook={megaMenu.text.source}
            groups={megaMenu.groups}
            onItemClick={itemClicked}
          />
        </div>
      }
    </span>
  )
}

type MenuItemsProps = {
  items: MenuItemType[]
  onItemClick?: () => void
}

const MenuItems = ({items, onItemClick}: MenuItemsProps) => {
  return (
    <>
      {items.map(item =>
        <MenuItem
          key={item.text}
          text={item.text}
          href={item.href}
          display={item.display}
          megaMenu={item.megaMenu}
          onItemClick={onItemClick}
        />
      )}
    </>
  )
}

type MenuProps = {
  menu: MenuType
}

export const Menu = ({menu}: MenuProps) => {

  const [displayMenuMobile, setDisplayMenuMobile] = useState(false)


  return (
    <>
      <nav className={classNames(styles.nav, {[styles.full]: displayMenuMobile})}>
        <div className={styles.navMobile}>
          <Logo withText={false} height={30} color={"#426156"}/>
          <Image
            src={MenuIcon}
            width={25}
            height={25}
            alt={'Menu'}
            onClick={() => setDisplayMenuMobile(!displayMenuMobile)}
          />
        </div>

        <div className={classNames(styles.itemsLeft, {[styles.hide]: !displayMenuMobile})}>
          <MenuItems
            items={menu.leftItems}
            onItemClick={() => setDisplayMenuMobile(false)}
          />
        </div>

        <div className={classNames(styles.itemsRight, {[styles.hide]: !displayMenuMobile})}>
          <MenuItems
            items={menu.rightItems}
            onItemClick={() => setDisplayMenuMobile(false)}
          />
        </div>

      </nav>

    </>

  )
}
