import { Link } from 'react-router-dom';
import { Button } from '../ui/Button';
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
import { useModalStore } from '../../stores/modalStore';
import { ModalWithForm } from './ModalWithForm';
import { motion } from 'framer-motion';
import { useRef, useState } from 'react';
import { BurgerIcon } from '../icons/BurgerIcon';
import { CloseIcon } from '../icons/CloseIcon';
import { useOnClickOutside } from 'usehooks-ts';
import { useLanguageStore } from '../../stores/languageStore';
import { LogoWithoutText } from '../icons/LogoWithoutTextIcon';

export function Header() {
  const { setModal } = useModalStore();
  const [menuOpen, setMenuOpen] = useState(false);

  const menuRef = useRef<HTMLDivElement>(null);
  const menuBtnRef = useRef<HTMLButtonElement>(null);
  useOnClickOutside<HTMLDivElement | HTMLButtonElement>(
    [menuRef, menuBtnRef],
    () => setMenuOpen(false),
  );

  return (
    <header className="sticky top-0 lg:px-6 px-4 flex max-lg:justify-between items-center lg:h-16 h-12 border-b border-[#3D425C] bg-[#14161F] z-50">
      <Link to={'/'} className="max-sm:hidden">
        <img
          src="images/GRAFFinteractive.svg"
          alt="GRAFFinteractive"
          className="lg:w-[118px] sm:w-[80px] max-sm:hidden"
        />
      </Link>
      <Link to={'/'} className="sm:hidden">
        <ClassNameWrapper element={<LogoWithoutText />} className="h-8" />
      </Link>
      <nav className="flex self-stretch mx-auto max-lg:hidden">
        {[
          { path: '/#products', text: 'Продукты' },
          { path: '/#projects', text: 'Проекты' },
          { path: '/#devices', text: 'Оборудование' },
          { path: '/#contacts', text: 'Контакты' },
        ].map(link => (
          <HashLink key={link.path} {...link} />
        ))}
      </nav>
      <div className="flex h-full -mr-4 lg:-mr-6">
        <Button
          className="h-full px-6 rounded-none lg:px-10 btn-text"
          onClick={() => setModal(<ModalWithForm />)}
        >
          Оставить заявку
        </Button>
        <button
          ref={menuBtnRef}
          className="h-full p-3 mr-0 aspect-square lg:hidden"
          onClick={() => setMenuOpen(prev => !prev)}
        >
          <ClassNameWrapper
            element={!menuOpen ? <BurgerIcon /> : <CloseIcon />}
            className={'mx-auto'}
          />
        </button>
      </div>
      <motion.div
        initial={{ opacity: 0, visibility: 'hidden' }}
        animate={{
          opacity: +menuOpen,
          visibility: menuOpen ? 'visible' : 'hidden',
        }}
        transition={{ duration: 0.2 }}
        ref={menuRef}
        onClick={() => setMenuOpen(false)}
        className={
          'absolute z-50 w-full lg:hidden sm:max-[1350px]:max-w-[340px] right-0 lg:top-16 top-12' +
          (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '')
        }
      >
        <div>
          <HashLink text="Продукты" path={'#products'} />
          <HashLink text="Проекты" path={'#projects'} />
          <HashLink text="Оборудование" path={'#devices'} />
          <HashLink text="Контакты" path={'#contacts'} />
        </div>
        <div className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-2">
          <Button
            onClick={() => {
              setMenuOpen(false);
              setModal(<ModalWithForm />);
            }}
            width="full"
            className="font-semibold rounded-none outline-none sm:hidden btn-text"
          >
            Оставить заявку
          </Button>
          <ChooseLang currentLang="RU" />
          <ChooseLang currentLang="EN" />
        </div>
      </motion.div>
    </header>
  );
}

function HashLink({ path, text }: { path: string; text: string }) {
  return (
    <Link
      className="btn-text border-l lg:last:border-r border-[#3D425C] px-10 self-stretch font-medium lg:text-[#9299BD] content-center hover:bg-[#3D425C] max-lg:flex max-lg:py-6 btn-text bg-[#14161F] w-full max-lg:[&:not(:last-child)]:border-b"
      to={path}
      onClick={() => {
        document
          .getElementById(path.slice(2))
          ?.scrollIntoView({ behavior: 'smooth' });
      }}
    >
      {text}
    </Link>
  );
}

function ChooseLang({ currentLang }: { currentLang: 'RU' | 'EN' }) {
  const { setLang, lang } = useLanguageStore();

  return (
    <button
      onClick={() => setLang(currentLang)}
      className={
        'min-h-[72px] w-full h-full btn-text font-semibold bg-[#14161F] lg:hover:bg-[#3D425C] border active:bg-[#14161F] outline-none ' +
        (lang === currentLang
          ? '[border-image:linear-gradient(to_right,#798FFF,#D375FF)_3]'
          : 'border-[#3D425C]')
      }
    >
      {currentLang}
    </button>
  );
}
