"use client";
import { result } from "@/lib/demoData";
import { useFilter } from "@/lib/filter-zustand";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useCategory } from "@/store/useCategory";
import { useSubCategory } from "@/store/useSubCategory";
import { useQuery } from "@tanstack/react-query";
import { Check } from "lucide-react";
import { useEffect, useState } from "react";

export default function Filter() {
  const filter = useFilter((state) => state.filter);
  const toggleFilter = useFilter((state) => state.toggleFilter);
  const hasData = useFilter((state) => state.hasFilter);
  const category = useCategory((state) => state.category);
  const subCategory = useSubCategory((state) => state.subCategory);

  const [dataExpanded, setDataExpanded] = useState<boolean>(false);
  const [numberExpanded, setNumberExpanded] = useState<boolean>(false);

  const [catalogData, setCatalogData] = useState<
    { id: number; name: string; type: string }[]
  >(result[0].items);
  const [sizeData, setSizeData] = useState<
    { id: number; name: string; type: string }[]
  >(result[1].items);

  const { data: catalog } = useQuery({
    queryKey: ["catalog"],
    queryFn: () => httpClient(endPoints.filter.catalogCategoryId(category.id)),
    select: (data) => {
      const catalogData = data?.data?.results;
      return catalogData.map((item: any) => ({
        id: item.id,
        name: item.name,
        type: "catalog",
      }));
    },
  });

  const { data: size } = useQuery({
    queryKey: ["size"],
    queryFn: () => httpClient(endPoints.filter.sizeCategoryId(category.id)),
    select: (data) => {
      const sizedata = data?.data?.results;
      return sizedata.map((item: any) => ({
        id: item.id,
        name: item.name,
        type: "size",
      }));
    },
  });

  useEffect(() => {
    catalog && setCatalogData(catalog);
    size && setSizeData(size);
  }, [size, catalog]);

  // Bo'lim uchun ko'rsatiladigan itemlar
  const visibleSectionData = dataExpanded
    ? catalogData
    : catalogData.slice(0, 5);

  // O'lcham uchun ko'rsatiladigan itemlar
  const visibleSectionNumber = numberExpanded
    ? sizeData
    : sizeData.slice(0, 10);

  return (
    <div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white">
      {/* Bo'lim filtri */}
      {visibleSectionData && (
        <div className="bg-gray-500 rounded-lg w-full">
          <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
            Bo'lim
          </p>
          <div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
            {visibleSectionData.map((item) => (
              <div
                key={item.id}
                onClick={() => toggleFilter(item)}
                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0"
              >
                <span
                  className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
                    hasData(item.name)
                      ? "border-red-600 bg-red-600"
                      : "border-gray-400 bg-transparent"
                  }`}
                  aria-label="Filter checkbox"
                >
                  {hasData(item.name) && (
                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
                  )}
                </span>
                <p className="whitespace-nowrap">{item.name}</p>
              </div>
            ))}
          </div>
          <button
            className="lg:flex hidden p-2 text-lg underline hover:text-red-300 transition"
            onClick={() => setDataExpanded(!dataExpanded)}
          >
            {dataExpanded ? "Yashirish" : "Ko'proq ko'rish"}
          </button>
        </div>
      )}

      {/* O'lcham filtri */}
      {visibleSectionNumber && (
        <div className="bg-gray-500 rounded-lg">
          <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
            O'lcham
          </p>
          <div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
            {visibleSectionNumber.map((item) => (
              <div
                key={item.id}
                onClick={() => toggleFilter(item)}
                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0"
              >
                <span
                  className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
                    hasData(item.name)
                      ? "border-red-600 bg-red-600"
                      : "border-gray-400 bg-transparent"
                  }`}
                  aria-label="Filter checkbox"
                >
                  {hasData(item.name) && (
                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
                  )}
                </span>
                <p>{item.name}</p>
              </div>
            ))}
          </div>
          <button
            onClick={() => setNumberExpanded(!numberExpanded)}
            className="lg:flex hidden p-2 text-lg underline hover:text-red-300 transition"
          >
            {numberExpanded ? "Yashirish" : "Ko'proq ko'rish"}
          </button>
        </div>
      )}
    </div>
  );
}
