import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import React, { useEffect, useState } from "react";
import { useProductStore } from "../../store/productStore";
import { alerts } from "../../utils/alerts";
import { useCategoryStore } from "../../store/categoryStore";
import All from "../../assets/images/microsoft_line.svg";
import { Link } from "react-router-dom";
import ProductFilter from "../../assets/images/product_filter.svg";
import Back from "../../assets/images/back.svg";
import "../../style/listProduct.css";
import ProductItem from "./ProductItem";
import SkeletonProduct from "../Loading/loadingProductsItem";
import { useAppStore } from "../../store/appStore";

const ListProduct: React.FunctionComponent = () => {
  const { appTheme } = useAppStore((state) => state);
  const { color_main_1 } = appTheme;
  const goBack = () => {
    window.history.back();
  };
  const productStore = useProductStore((state) => state);
  const [selectedTab, setSelectedTab] = useState("popular");
  const [categories, setCategories] = useState([]);
  const categoryStore = useCategoryStore((state) => state);
  const { productsList, loading } = productStore;

  useEffect(() => {
    categoryStore.allCategory(
      (response) => {
        setCategories(response.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  }, []);

  const handleClick: any = (slug, id) => {
    productStore.productByCategory(
      { slug, id },
      (response) => {
        // setProducts(response.data.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  };

  useEffect(() => {
    productStore.getAllProduct(
      (response) => {
        // setProducts(response.data.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  }, []);

  const allProduct = () => {
    productStore.getAllProduct(
      (response) => {
        // setProducts(response.data.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  };

  const handleSearch: any = (value) => {
    productStore.searchByName(
      { value },
      (response) => {
        // setProducts(response.data.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  };

  const productsNew: any = () => {
    productStore.productsNew(
      (response) => {
        console.log(response);
        // setProducts(response.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  };

  const productsTopSale: any = () => {
    productStore.productsTopSale(
      (response) => {
        // setProducts(response.data.data);
      },
      (error) => {
        alerts.error(error.response.data.msg);
      }
    );
  };

  const renderProducts = () => {
    if (loading)
      return (
        <div>
          <SkeletonProduct />
        </div>
      );
    if (!productsList || !productsList.length)
      return (
        <div className="mt-[10px] flex justify-center text-gray-500">
          Không có sản phẩm
        </div>
      );

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

  return (
    <div className="list-product">
      <div className=" category bg-white flex mt-[50px] h-[40px] leading-[40px] justify-between">
        <p
          style={{
            color: selectedTab === `popular` ? color_main_1 : "",
            marginLeft: 10,
          }}
          onClick={() => {
            setSelectedTab("popular");
            allProduct();
          }}
        >
          Phổ biến
        </p>
        <p
          style={{ color: selectedTab === `new` ? color_main_1 : "" }}
          onClick={() => {
            setSelectedTab("new");
            productsNew();
          }}
        >
          Mới nhất
        </p>
        <p
          style={{ color: selectedTab === `sale` ? color_main_1 : "" }}
          onClick={() => {
            setSelectedTab("sale");
            productsTopSale();
          }}
        >
          Bán chạy
        </p>
        <p
          style={{
            color: selectedTab === `price` ? color_main_1 : "",
            marginRight: 10,
          }}
          onClick={() => {
            setSelectedTab("price");
          }}
        >
          Giá
        </p>
      </div>
      <div className="overflow-x-scroll hidden-scrollbar">
        <div className="flex bg-white w-fit overflow-x-scroll ">
          <div
            onClick={() => allProduct()}
            className="w-[50px] border-r-[1px] border-solid	border-gray-600 flex flex-col gap-[4px]"
          >
            <img className="h-[30px] mr-0" src={All}></img>
            <p className="text-center leading-[140%] font-extralight text-[10px]">
              Tất cả
            </p>
          </div>
          {categories.map((item) => (
            <div
              onClick={() => handleClick(item.slug, item.id)}
              className="w-[60px] border-r-[1px] border-solid pr-[7px] mx-[5px] border-gray-600"
            >
              <img
                className="h-[30px] mb-[4px] mx-auto"
                src={item.image_url}
              ></img>
              <p className="text-center leading-[140%] font-extralight text-[10px]">
                {item.name}
              </p>
            </div>
          ))}
        </div>
      </div>
      {renderProducts()}
      <div
        style={{ backgroundColor: color_main_1 }}
        className="header-top-detail gap-y-[20px] fixed top-0 flex w-full pl-[15px] h-[50px] text-white leading-[40px] shadow-[2px_2px_8px_rgba(0,0,0,0.5)]"
      >
        <img
          onClick={goBack}
          src={Back}
          className="pr-[20px] my-auto w-[50px] h-[50px]"
        ></img>
        <Input
          className="h-[35px] flex-1 m-auto"
          onChange={(e) => handleSearch(e.target.value)}
          size="large"
          placeholder="Nhập từ khóa..."
          prefix={<SearchOutlined />}
        />
        <img
          src={ProductFilter}
          className="my-auto px-[20px] w-[60px] h-[50px]"
        ></img>
      </div>
    </div>
  );
};

export default ListProduct;