import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useProductStore } from "../../store/productStore";
import { alerts } from "../../utils/alerts";
import Header from "../../components/Header";
import ProductItem from "../Product/ProductItem";
import SkeletonProduct from "../Loading/loadingProductsItem";

const ProductFavorites: React.FunctionComponent = () => {
  const navigate = useNavigate();
  const productStore = useProductStore((state) => state);
  const { favoritesProduct, loading } = productStore;
  const token = localStorage.getItem("token");

  useEffect(() => {
    if (!token) navigate("/request-login");
    else {
      productStore.favorites(
        (response) => {
          // setProducts(response.data.data.data);
        },
        (error) => {
          alerts.error(error.response.data.msg);
        }
      );
    }
  }, []);

  const renderFavoritesProduct = () => {
    if (loading)
      return (
        <div>
          <SkeletonProduct />
        </div>
      );
    if (!favoritesProduct || !favoritesProduct.length)
      return (
        <div className="flex justify-center text-gray-500 mt-5">
          Bạn chưa thích sản phẩm nào
        </div>
      );

    return (
      <div className="mt-[10px] grid grid-cols-2 sm:grid-cols-3 gap-4 pl-[16px] mr-[16px]">
        {favoritesProduct && favoritesProduct.length
          ? favoritesProduct.map((item, index) => {
              if (index > 5) return null;
              return <ProductItem product={item} />;
            })
          : null}
      </div>
    );
  };

  return (
    <div>
      <Header title="Sản phẩm yêu thích" />
      <div>{renderFavoritesProduct()}</div>
    </div>
  );
};

export default ProductFavorites;