'use client';
import { PRODUCT_INFO } from '@/shared/constants/data';
import Image from 'next/image';
import React, { useEffect } from 'react';
import { headerContactData, menuItemsData, navSocialIcons } from '../lib/data';
import SearchInput from './SearchInput';
import { Menu } from 'lucide-react';
import NavMenuItem from './NavMenuItem';
import Link from 'next/link';
import useSidebarStore from '@/shared/store/sidebarStore';
import { useCategoryStore } from '@/shared/store/categoryStore';
import { useQuery } from '@tanstack/react-query';
import { getCategory, getAllProduct } from '@/shared/config/api/testApi';
import { useProductStore } from '@/shared/store/productStore';

const Navbar = () => {
  const { openSidebar } = useSidebarStore();

  const { data: resCategories } = useQuery({
    queryKey: ['category'],
    queryFn: () => getCategory(),
  });
  const { data: resProducts } = useQuery({
    queryKey: ['all-products'],
    queryFn: () => getAllProduct(),
  });
  const categories = resCategories?.results || [];
  const products = resProducts?.results || [];

  const { setCategories } = useCategoryStore();
  const { setProducts } = useProductStore();

  useEffect(() => {
    setCategories(categories);
    setProducts(products);
  }, [resCategories, resProducts]);

  const menuItems = menuItemsData.map((item) => {
    if (item.id === 'pr005e') {
      return {
        ...item,
        children: categories.map((item) => {
          return {
            id: item.id,
            title: item.title,
            link: '/products',
          };
        }),
      };
    } else {
      return item;
    }
  });

  return (
    <div className="z-30 sticky top-0 left-0 right-0 bg-white shadow-xs">
      <header>
        <div className="flex justify-between items-center gap-1 h-[80px] custom-container">
          <Link
            href={'/'}
            className="min-w-[100px] flex flex-col max-sm:items-start items-center justify-center"
          >
            <Image
              src={PRODUCT_INFO.logo}
              alt={PRODUCT_INFO.name}
              width={100}
              height={100}
              className="w-[60px] h-[40px] object-contain"
            />
            <div className="text-[14px] font-bold text-center text-accent max-sm:hidden">
              {PRODUCT_INFO.logoTitle}
            </div>
          </Link>
          <div className="flex justify-end items-center gap-4">
            <div className="items-center gap-4 hidden lg:flex">
              {headerContactData.map(({ id, icon: Icon, title, link }) => (
                <div
                  key={id}
                  className="flex items-center gap-1 text-[14px] text-muted text-nowrap"
                >
                  <Icon size={'20px'} className="fill-secondary stroke-white" />
                  <a
                    href={link}
                    className="font-medium hover:text-accent duration-200"
                  >
                    {title}
                  </a>
                </div>
              ))}
            </div>
            <div className="flex justify-end items-center gap-3">
              <SearchInput />
            </div>
          </div>
        </div>
      </header>

      <nav className="bg-muted-foreground border-y">
        <div className="custom-container flex justify-between items-center gap-1 h-[50px]">
          <div className="flex justify-start items-center gap-3 flex-1">
            {navSocialIcons.map(({ id, icon: Icon, link, color }) => (
              <div key={id}>
                <Link href={link} target="blank">
                  <div
                    style={{ backgroundColor: color }}
                    className={`duration-150 text-[16px] size-[28px] ${color === '#0088cc' ? 'pr-[2px]' : 'pr-0'} rounded-full text-white flex justify-center items-center hover:brightness-110`}
                  >
                    <Icon />
                  </div>
                </Link>
              </div>
            ))}
          </div>
          <div className="flex-[2] hidden lg:block">
            <ul className="flex justify-between items-center gap-3">
              {menuItems.map((item) => (
                <NavMenuItem key={item.id} item={item} />
              ))}
            </ul>
          </div>
          <div
            onClick={openSidebar}
            className="w-[30px] lg:hidden h-[30px] bg-gray-200/50 cursor-pointer hover:text-primary duration-300 hover:bg-gray-400/10 flex justify-center items-center rounded-xs"
          >
            <Menu size={'20px'} strokeWidth={2.2} />
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;
