'use client';

import s from './styles.module.scss';
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { ROUTES } from '@shared/const/route';
import { Icons } from '@shared/ui/icon';
import { baseMenu, TMenuItem } from '@shared/const/menu';
import { BeautyButton } from '@/entities';
import dtrLogo from '@public/images/dtr-logo-eagle.png';
import { Burger } from '@shared/ui';
import { Sidebar } from '@/widgets';
import { phoneBeautify } from '@shared/lib/phoneBeautify/phoneBeautify';
import { CONTACTS } from '@shared/const/contacts';

function BaseMenu() {
  const phone = phoneBeautify(CONTACTS.PHONE);

  const [open, setOpen] = useState(false);

  const handleClose = () => setOpen(false);

  const Menu = ({ list }: { list: TMenuItem[] }) => {
    const nodeList = (list: TMenuItem[]) => {
      return list.map((item, index) => {
        if (item.children && item.children.length) {
          return (
            <li key={index} className={s.Parent}>
              <div className={s.Row}>
                {item.link ? (
                  <Link href={item.link}>{item.title}</Link>
                ) : (
                  item.title
                )}
                <Icons.MenuArrow className={s.Expand} />
              </div>
              <ul className={s.Child}>{nodeList(item.children)}</ul>
            </li>
          );
        }

        return (
          <li key={index}>
            <Link href={item.link!}>{item.title}</Link>
          </li>
        );
      });
    };
    return (
      <nav className={s.Nav}>
        <ul className={s.Menu}>{nodeList(list)}</ul>
      </nav>
    );
  };

  return (
    <section className={s.ContainerNavbar}>
      <div className={s.Navbar}>
        <Link href={ROUTES.HOME}>
          <Image
            className={s.Logotype}
            src={dtrLogo}
            alt={CONTACTS.COMPANY}
            quality={75}
            priority
          />
        </Link>
        <Menu list={baseMenu} />
        <div className={s.Invite}>
          <BeautyButton>{phone}</BeautyButton>
        </div>
        <div className={s.MobileNav}>
          <Burger isOpen={open} onToggle={setOpen} />
        </div>
      </div>
      <Sidebar isOpen={open} onClose={handleClose} list={baseMenu} />
    </section>
  );
}

export { BaseMenu };
