"use client";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import React, { useEffect, useState } from "react";
import SwiperComponent from "./swiper-component";
import { ProductItemModel, ProductResponse } from "@/lib/types/models/product";
import categoryService from "@/lib/services/category";
import { useCategoryStore } from "@/zustand/categoryStore";

export default function Page() {
  const { categories } = useCategoryStore();

  const [selectedCategory, setSelectedCategory] = useState("");
  const [categoryData, setCategoryData] = useState<ProductItemModel[]>([]);

  useEffect(() => {
    if (categories && categories.length) {
      setSelectedCategory(categories[0]?._id);
      onValueChange(categories[0]?._id);
    }
  }, [categories]);

  const onValueChange = async (val: string) => {
    setSelectedCategory(val);
    const response: ProductResponse =
      await categoryService.fetchProductByCategory(
        `categoryId=${val}&limit=10`
      );
    const data = response.success ? response.data : [];
    setCategoryData(data);
  };

  return (
    <>
      <TabsPrimitive.Root
        className="mobile-container flex w-full flex-col category-tabs"
        value={selectedCategory}
        onValueChange={(val) => onValueChange(val)}
      >
        <TabsPrimitive.List
          className="flex shrink-0 border-b border-mauve6 scrollbar overflow-x-auto"
          aria-label="category"
        >
          {categories.map((item, index) => (
            <TabsPrimitive.Trigger
              key={index}
              className="flex shrink-0 items-center h-[45px] cursor-pointer bg-white px-5 font-medium text-[15px] text-[#3E3E3E] outline-none  hover:text-primary data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-b-2 data-[state=active]:border-primary"
              value={item._id}
            >
              {item.name}
            </TabsPrimitive.Trigger>
          ))}
        </TabsPrimitive.List>
      </TabsPrimitive.Root>
      <SwiperComponent data={categoryData} />
    </>
  );
}