import { FC, useEffect, useState } from "react";
import cx from "classnames";
import * as CategoryAPI from "../../../pages/api/category";
import Slider from "react-slick";
import { Image, Modal } from "antd";
import { baseUrl } from "../../../constants/urls";
import MegaMenu from "../../home/MegaMenu";
import styles from "./customerCategory.module.scss";
import { RightOutlined, LeftOutlined } from "@ant-design/icons";

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


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

    function SampleNextArrow(props: any) {
        const { className, style, onClick, currentSlide } = props;
        return (
          <>
            {currentSlide !== category.length - 6 && (
              <div
                style={{
                  ...style,
                  display: "block",
                  zIndex: "15",
                  borderRadius: "50%",
                  opacity: "1",
                  right: 0,
                  color: "#fff",
                  justifyContent: "center",
                }}
                onClick={onClick}
              >
                <RightOutlined 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}
          >
            <LeftOutlined className={styles.iconLeftDisplay} />
          </div>}
          </>
        );
      }
      
      const slickSettings = {
        dots: false,
        arrows: true,
        infinite: false,
        speed: 400,
        slidesToShow: 8,
        slidesToScroll: 1,
        autoplay: false,
        nextArrow: <SampleNextArrow />,
        prevArrow: <SamplePrevArrow />,
        responsive: [
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 6,
            },
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 2,
            },
          },
        ],
      };

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

    return(
        <div className={styles.categoryContainer}>
      <div className={styles.sliderMain}>
        <Slider {...slickSettings}>
          {category.map((cat: any, i) => {
            const img = cat.category_icon_url;

            return (
              <div
                className={styles.categoryCard}
                key={i}
                 onClick={showModal(cat)}
                // onMouseOver={showModal(cat)}
                // onMouseOver={showModal(cat)}
              ><div>
                <Image
                  preview={false}
                 
                  src={`${img}`}
                  alt={cat.name}
                  className={styles.imageDisplay}
                />
                <div className={styles.categoryText}>{cat.name}</div>
              </div>
              </div>

              // <CategoryCard {...cat} key={i} showModal={showModal} />
            );
          })}
        </Slider>
      </div>
      <Modal
        visible={isVisible}
        onCancel={hideModal}
        footer={null}
        style={{ top: "3%", bottom: "8%" }}
        bodyStyle={{
          backgroundColor: "#eceef2",
          padding: 0,
          borderRadius: "10px",
        }}
        width={"100%"}
      >
        <MegaMenu selectedCat={selectedCat} dataTree={subCat} />
      </Modal>
    </div>
    )
}

export default CustomerCategory;