'use client';

import Link from 'next/link';
import Image from 'next/image';
import images from '@/assets/images/images';
import { usePathname, useParams } from 'next/navigation';
import { Icon } from '@/components/uikit/icons';
import { useTranslations } from 'next-intl';
import { useEffect, useRef } from 'react';
import FooterInfo from '../footer/FooterInfo';
import routeFactory from '@/assets/constants/routeFactory';

interface Props {
  isOpen: boolean;
  onClose: () => void;
}

export default function HamburgerMenu({ isOpen, onClose }: Props) {
  const pathname = usePathname();
  const params = useParams();
  const locale = params.locale as string;
  const t = useTranslations();
  const menuRef = useRef<HTMLDivElement>(null);

  // Generate links dynamically with current locale and translations
  const routes = routeFactory(t, locale);
  const links = [
    routes.home,
    routes.about,
    routes.contact,
    routes.productCategories,
    routes.projects,
    routes.blog,
  ];

  const linkClass = (href: string) => {
    let isActive = false;
    if (href === '/' || href === `/${locale}`) {
      isActive = pathname === '/' || pathname === `/${locale}`;
    } else {
      isActive = pathname.startsWith(href);
    }
    return isActive
      ? 'bg-primary text-white'
      : 'border border-white/10 text-white hover:bg-white/10';
  };

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        onClose();
      }
    }

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      document.getElementsByTagName('main')[0].style.overflow = 'hidden';
    } else {
      document.getElementsByTagName('main')[0].style.overflow = 'auto';
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;
  return (
    <div className="fixed inset-x-0 top-0 z-50 flex h-screen">
      <div className="absolute inset-0 bg-black/60" />

      <div
        ref={menuRef}
        className="relative z-10 flex h-full w-80 max-w-full flex-col bg-black p-5 text-white"
      >
        <div className="mb-14 flex items-center justify-between">
          <Link href={`/${locale}`} className="h-12 w-auto">
            <Image
              alt="logo"
              src={images.logo}
              className="h-full w-auto object-contain"
            />
          </Link>
          <button onClick={onClose}>
            <Icon name="close" className="h-6 w-6 text-white" />
          </button>
        </div>

        <nav className="flex flex-col gap-6">
          {links.map(({ route: link, title }) => {
            return (
              <Link
                key={link()}
                href={link()}
                onClick={onClose}
                className={`rounded-lg px-4 py-3 text-center text-sm font-medium ${linkClass(
                  link(),
                )}`}
              >
                {title}
              </Link>
            );
          })}
        </nav>

        <div className="mt-auto flex flex-col items-center pt-10 text-xs text-gray-400">
          <FooterInfo className="text-center" />
        </div>
      </div>
    </div>
  );
}
