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

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

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

  const renderPurchasedProducts = () => {
    if (loading)
      return (
        <div>
          <SkeletonProduct />
        </div>
      );
    if (!purchasedProducts || !purchasedProducts.length)
      return (
        <div className="flex justify-center text-gray-500 mt-5">
          Bạn chưa mua 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]">
        {purchasedProducts && purchasedProducts.length
          ? purchasedProducts.map((item, index) => {
              if (index > 5) return null;
              return <ProductItem product={item} />;
            })
          : null}
      </div>
    );
  };

  return (
    <div>
      <Header title="Sản phẩm đã mua" />

      <div>{renderPurchasedProducts()}</div>
    </div>
  );
};

export default PurchasedProducts;