import { Carousel, Image, Modal } from "antd";
import { FC, useEffect, useState } from "react";
import Slider from "react-slick";
import styles from "./brandFeaturedCategory.module.scss";
import cx from "classnames";
import * as CategoryAPI from "../../../../../pages/api/category";

import {
  RightOutlined,
  LeftOutlined,
  DownOutlined,
  UpOutlined,
} from "@ant-design/icons";
import { baseUrl } from "../../../../../constants/urls";

const BrandFeaturedCategory: FC<any> = () => {
  const [isVisible, setVisibility] = useState(false);
  const [selectedCat, setSelectedCat] = useState({});
  const [category, setCategory] = useState([]);
  const [subCat, setSubCat] = useState({});
  const [categoryTree, setCategoryTree] = useState([]);
  const [brandList, setBrandList] = useState<any>({});

  const hideModal = () => {
    setSelectedCat({});
    setSubCat({});
    setVisibility(false);
  };

  const showModal = (selectedCat: any) => () => {
    categoryTree.forEach((element: any) => {
      if (element.name == selectedCat.name) {
        setSubCat(element);
        setSelectedCat(selectedCat);
        setVisibility(true);
      }
    });
  };

  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });
    CategoryAPI.brandsList().then((res) => {
      setBrandList(res);
    });
  }, []);

  function SampleNextArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;
    return (
      <>
        <div
          style={{
            ...style,
            display: "block",
            zIndex: "15",
            borderRadius: "50%",
            opacity: "1",
            left: 0,
            color: "#fff",
            justifyContent: "center",
          }}
          onClick={onClick}
        >
          <DownOutlined className={styles.iconRightDisplay} />
        </div>
      </>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick, currentSlide } = props;

    return (
      <>
        {currentSlide !== 0 && (
          <div
            style={{
              ...style,
              display: "block",
              zIndex: "15",
              borderRadius: "50%",
              opacity: "1",
              left: 0,
              color: "#fff",
              justifyContent: "center",
            }}
            onClick={onClick}
          >
            <UpOutlined className={styles.iconLeftDisplay} />
          </div>
        )}
      </>
    );
  }

  const slickSettings = {
    dots: true,
    arrows: false,
    infinite: true,
    speed: 400,
    slidesToShow: 8,
    slidesToScroll: 4,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    responsive: [
      {
        breakpoint: 1540,
        settings: {
          slidesToShow: 6,
        },
      },
      {
        breakpoint: 1280,
        settings: {
          slidesToShow: 5,
        },
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
        },
      }
    ],
  };

  return (
    <div className={styles.categoryContainer}>
      <h1 className={styles.brandtitle}>Featured Categories</h1>
      <div className={styles.sliderMain}>
        <Slider {...slickSettings}>
          {category.slice(0, 8).map((cat: any, i) => {
            const img =
              cat.image === null && cat.image_url === null
                ? cat.category_icon_path
                : cat.image;

            return (
              <div
                className={styles.categoryCard}
                key={i}
                onClick={showModal(cat)}
              >
                <Image
                  preview={false}
                  src={`${baseUrl}/cache/small/${img}`}
                  alt={"Image"}
                  className={styles.imageDisplay}
                  height={80}
                />
                <div className={styles.categoryText}>{cat.name}</div>
              </div>
            );
          })}
        </Slider>
      </div>

      {/* <Modal
        visible={isVisible}
        onCancel={hideModal}
        footer={null}
        style={{ top: "3%", bottom: "8%" }}
        bodyStyle={{
          backgroundColor: "#F5F5F5",
          padding: 0,
          borderRadius: "10px",
        }}
        width={"100%"}
        className={styles.modalStyles}
      >
        <MegaMenu
          selectedCat={selectedCat}
          dataTree={subCat}
          brandList={brandList}
        />
      </Modal> */}
    </div>
  );
};

export default BrandFeaturedCategory;