import React, { useState, FC, useEffect } from "react";
import { Spin } from "antd";
import styles from "./bestSelleingProducts.module.scss";
import ProductCard from "../../products/productCard";
import cx from "classnames";
import * as CategoryAPI from "../../../pages/api/categories";
import Slider from "react-slick";
import {
  SampleNextArrow,
  SamplePrevArrow,
} from "../../sellerLanding/common/ArrowDirections";
import { SettingFilled } from "@ant-design/icons";
import { useRouter } from "next/router";
import { useMediaQuery } from "react-responsive";

const bestSelleingProducts: FC<any> = (props) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const [products, setProducts] = useState<any>({ data: {}, meta: {} });
  const [isDataLoading, setIsDataLoading] = useState(true);
  const antIcon = <SettingFilled style={{ fontSize: 24 }} spin />;
  const router = useRouter();

  useEffect(() => {
  
    CategoryAPI.fetchBestSellerProducts(props?.id).then((res) => {
      setProducts(res);
      setIsDataLoading(false);
    });
  }, [props?.id]);

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: false,
    speed: 500,
    slidesToShow: 5,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  return (
    <>
      <div className={cx("container my-10")} style={{ padding:isMobile?"5rem 0":"0 0 1rem 0" }}>
        <h2 className={cx("sectionSubTitle")}>BEST SELLING</h2>
        {isDataLoading ? (
          <div style={{
            width:"100%",
          textAlign:"center"
          }}>
          <Spin indicator={antIcon} tip="Loading..." />
          </div>
        ) : (
          <Slider {...slickSettings}>
            {Array.isArray(products.data) &&
              products.data.map((product: any) => {
                return (
                  <div key={product.id}>
                    <ProductCard
                      key={product.id}
                      product={product}
                      isGridView={true}
                    />
                  </div>
                );
              })}
          </Slider>
        )}
      </div>
    </>
  );
};

export default bestSelleingProducts;