import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import Slider from "react-slick";
import { FC, useState } from "react";
import ProductCard from "../../../../products/productCard";
import styles from "./brandLatestOffer.module.scss";
import cx from "classnames";
import MobileView from "../../../../products/productCardES/MobileView";
import MediaQuery from "react-responsive";

const BrandLatestOffers: FC<any> = ({ products }) => {
  const isGridView = true;
  const [itemCount, setitemCount] = useState(0);
  function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          height: 20,
          width: 20,
          opacity: "1",
          right: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <RightOutlined className={styles.iconRightDisplay} />
      </div>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          height: 20,
          width: 20,
          opacity: "1",
          left: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay} />
      </div>
    );
  }

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: true,
    speed: 400,
    slidesToShow: 1.8,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1223,
        settings: {
          slidesToShow: 1.5,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };
  return (
    <>
      <div
        className={cx(styles.brandlatestOffersDiv)}
        style={{ marginTop: "1.5em" }}
      >
        {products && products.length > 0? (
          <>
            <h2 className={styles.brandtitle}>Featured Products</h2>
            <MediaQuery minWidth={769}>
              <div className={styles.latestOffersDiv}>
                <Slider {...slickSettings}>
                  {products &&
                    products
                      .slice(0, 5)
                      .sort(
                        (a: any, b: any) =>
                          parseFloat(a.price) - parseFloat(b.price)
                      )
                      .map((product: any) => {
                        return (
                          <div key={product.id}>
                            <MobileView
                              product={product._source}
                              itemCount={itemCount}
                            />
                            {/* <ProductCard
              key={product._id}
              product={product._source}
              isGridView={isGridView}
            /> */}
                          </div>
                        );
                      })}
                </Slider>
              </div>
            </MediaQuery>
            <MediaQuery maxWidth={768}>
              <div className={styles.latestOffersMobileDiv}>
                <Slider {...slickSettings}>
                  {products &&
                    products
                      .slice(0, 5)
                      .sort(
                        (a: any, b: any) =>
                          parseFloat(a.price) - parseFloat(b.price)
                      )
                      .map((product: any) => {
                        return (
                          <div key={product.id}>
                            <MobileView
                              product={product._source}
                              itemCount={itemCount}
                            />
                            {/* <ProductCard
              key={product._id}
              product={product._source}
              isGridView={isGridView}
            /> */}
                          </div>
                        );
                      })}
                </Slider>
              </div>
            </MediaQuery>
          </>
        ) : (
          <></>
        )}
      </div>
    </>
  );
};
export default BrandLatestOffers;