import { useState } from 'react';
import { NavLink } from '../../ui/NavLink';
import { Link } from 'react-router-dom';
import { Lang, useLang } from '../../store/language';

export function Navbar() {
  const [menuOpen, setMenuOpen] = useState(false);
  const { value: lang } = useLang();

  return (
    <>
      <nav className="flex items-stretch justify-between border-b border-[#3D425C] desktop:pl-10 mobile:pl-4 desktop:min-h-[72px] mobile:min-h-16">
        <Link to={'/'} className="flex w-[104px] justify-between items-center">
          <img src="src/assets/logo.svg" alt="" />
          <img
            src="src/assets/text_logo.svg"
            alt=""
            className="desktop:block mobile:hidden"
          />
        </Link>
        <div className="flex">
          <NavLink text="Типы тренажеров" route="/" />
          <NavLink text="Варианты комплектации" route="/" />
          <NavLink text="Проекты" route="/" />
          <NavLink text="События" route="/" />
          <button className="btn-text font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
            Оставить заявку
          </button>
          <LangToggler lang={lang} />
          <button
            onClick={() => setMenuOpen(prev => !prev)}
            className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-tablet:border-l"
          >
            <img
              src={`src/assets/${menuOpen ? 'cross' : 'burger'}.svg`}
              alt=""
            />
          </button>
        </div>
      </nav>
      {menuOpen && (
        <div
          onClick={() => setMenuOpen(false)}
          className={
            'absolute z-50 w-full min-[1350px]:hidden tablet:max-[1350px]:max-w-[340px] right-0 tablet:border-l border-b border-[#3D425C]' +
            (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '')
          }
        >
          <BurgerLink route="/" text="Типы тренажеров" />
          <BurgerLink route="/" text="Варианты комплектации" />
          <BurgerLink route="/" text="Проекты" />
          <BurgerLink route="/" text="События" />
          <div className="grid mobile:max-tablet:grid-cols-[216px_1fr_1fr] tablet:grid-cols-2">
            <button className="text-[#ffffff] tablet:hidden font-semibold btn-text bg-gradient-to-r from-[#798FFF] to-[#D375FF] py-[30px] px-10">
              Оставить заявку
            </button>
            <ChooseLang lang="RU" />
            <ChooseLang lang="EN" />
          </div>
        </div>
      )}
    </>
  );
}

function BurgerLink({ text, route }: { text: string; route: string }) {
  return (
    <Link
      to={route}
      className="flex items-center px-10 py-6 gap-1 text-[#ffffff] btn-text bg-[#14161F] w-full font-semibold border-[#3D425C] border-b hover:bg-[#3D425C] active:bg-[#14161F]"
    >
      <img src="src/assets/cube.svg" alt="" />
      {text}
    </Link>
  );
}

function ChooseLang({
  lang,
  isBordered = false,
}: {
  lang: 'RU' | 'EN';
  isBordered?: boolean;
}) {
  const { updateLang, value } = useLang();
  return (
    <div
      className={
        'min-h-[72px] ' +
        (value !== lang
          ? 'bg-[#3D425C]'
          : 'bg-gradient-to-r from-[#798FFF] to-[#D375FF] p-px')
      }
    >
      <button
        onClick={() => updateLang(lang)}
        className={
          'text-[#ffffff] w-full h-full btn-text font-semibold bg-[#14161F] hover:bg-[#3D425C] active:bg-[#14161F] ' +
          (isBordered ? 'border border-[#3D425C]' : '')
        }
      >
        {lang}
      </button>
    </div>
  );
}

function LangToggler({ lang }: { lang: Lang }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="min-w-[101px] mobile:max-[1349px]:hidden box-border border-r border-[#3D425C]">
      <button
        onClick={() => setOpen(prev => !prev)}
        className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold box-border btn-text"
      >
        {lang}
        <img src="src/assets/arrow_down.svg" alt="" />
      </button>
      {open && (
        <div
          className="absolute grid grid-cols-2 min-w-[101px] box-border"
          onClick={() => setOpen(false)}
        >
          <ChooseLang isBordered lang={'RU'} />
          <ChooseLang isBordered lang={'EN'} />
        </div>
      )}
    </div>
  );
}