'use client';
import { getOneProduct } from '@/shared/config/api/testApi';
import { IBreadcrumbItem, pageStore } from '@/shared/store/pageStore';
import { IProductDetail } from '@/shared/types/testApi';
import PageNotFound from '@/widgets/not-fount/ui';
import ProductDetails from '@/widgets/product-detail/ui/ProductDetail';
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'next/navigation';
import React, { useEffect } from 'react';

const ProductDetail = () => {
  const { detail } = useParams();
  const id = Number(detail as unknown as string);
  const { data: resProductsDetail, isLoading: loadProducts } = useQuery({
    queryKey: ['productItem', id],
    queryFn: () => getOneProduct(id),
  });

  const detailData: IProductDetail | undefined = resProductsDetail;
  const breadcrumsItem: IBreadcrumbItem[] = [
    {
      label: 'Главная',
      href: '/',
    },
    {
      label: 'Продукты',
      href: '/products',
    },
    {
      label: 'Подробности о продукте',
      href: '/products',
    },
  ];

  const { onChangePage } = pageStore((state) => state);

  useEffect(() => {
    onChangePage({
      title: 'Подробности о продукте',
      breadcrumbs: breadcrumsItem,
    });
  }, []);

  if (loadProducts)
    return (
      <div className="">
        <div className="custom-container min-h-[400px] flex justify-center items-center text-muted font-medium">
          Загрузка...
        </div>
      </div>
    );

  return (
    <div>
      {detailData ? <ProductDetails item={detailData} /> : <PageNotFound />}
    </div>
  );
};

export default ProductDetail;
