import { Carousel, Tabs } from "antd";
import { FC, useState } from "react";
import TabOfferOptions from "./TabOfferOptions";
import cx from "classnames";
import styles from "./offersTabs.module.scss";
import { baseUrl } from "../../../constants/urls";
import type { DotPosition } from "antd/es/carousel";
import {
  SampleNextArrow,
  SamplePrevArrow,
} from "../../sellerLanding/common/ArrowDirections";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { BiChevronDown } from "react-icons/bi";
import Slider from "react-slick";
import { useMediaQuery } from "react-responsive";

const HomeLatestOffers: FC<any> = ({ offerData }) => {
  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  const offersData = new Array(4).fill(null);

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: true,
    speed: 400,
    autoplaySpeed: 3000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    vertical:true,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1054,
        settings: {
          slidesToShow: 2,
          autoplay: true,
        },
      },
    ],
  };

  function SampleNextArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;
    return (
      <>
        <div onClick={onClick} className={styles.downIconDisplay}>
          <BiChevronDown style={{ fontSize: "20px", color: "#291c61" }} />
        </div>
      </>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;
    return  (
      <>
        <div onClick={onClick} className={styles.iconLeftDisplay}>
          <UpOutlined style={{  color: "#291c61" }} />
        </div>
        </>
        )
  }

  return (
    <>
      <div className={cx(styles.latestOffersContainer)}>
       
        {/* <span className={styles.offersText}>Latest Offers</span> */}
        <Slider  {...slickSettings}>
          {offerData &&
            offerData.map((img: any, idx: number) => {
              let imageSrc = ""
              {
                img
                  ? imageSrc = `${baseUrl}/storage/${img.image}`
                  : imageSrc = `/images/offerLatestImage${idx + 1}.jpg`;
              }
              return (
                // <div key={idx} className={styles.home_offer_image}>
                <img
                  key={idx}
                  src={imageSrc}
                  // src={`/images/offerLatestImage${idx+1}.jpg`}
                  alt={`image`}
                  className={cx(styles.latestOffersImg)}
                  onClick={() => {
                    window.open(img.url, "_self");
                  }}
                />
                // </div>
              );
            })}
        </Slider>
      </div>
    </>
  );
};
export default HomeLatestOffers;