import {Image, Modal, Skeleton } from "antd";
import { FC, useEffect, useRef, useState } from "react";
import styles from "./category.module.scss";
import MegaMenu from "../MegaMenu";
import * as CategoryAPI from "../../../pages/api/category";
import { motion, useScroll } from "framer-motion";

import {
  DownOutlined,
  UpOutlined,
} from "@ant-design/icons";

import _ from "lodash";
import { useRouter } from "next/router";


const CategoryCardContainer: FC<any> = ({ categoryTree }) => {
  const [isVisible, setVisibility] = useState(false);
  const [selectedCat, setSelectedCat] = useState({});
  const [category, setCategory] = useState([]);
  const [subCat, setSubCat] = useState({});
   const [categoryTree1, setCategoryTree1] = useState([]);
  const [brandList, setBrandList] = useState<any>({});
  const [height, setHeight] = useState(0);
  const carousel = useRef<any>(0);
  const [isLoading,setIsLoading] = useState(false);
  const router = useRouter();

  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(() => {
    setIsLoading(true);
    CategoryAPI.fetchHomeCategory().then((res) => {
      setIsLoading(false)
      setCategory(res);
      
    });
  
    setHeight(carousel.current.scrollHeight - carousel.current.offsetHeight);
  }, [router]);
  useEffect(()=>{
    setCategoryTree1(categoryTree1)
  },[categoryTree])

  const scrollToTop = () => {
    carousel.current.scrollTo({ top: 0, behavior: "smooth" });
  };

  const scrollToBottom = () => {
    carousel.current.scrollTo({
      top: carousel.current.offsetHeight,
      behavior: "smooth",
    });
  };

//console.log(categoryTree,"categoryTree")
  return (
    <div className={styles.categoryContainer}>
      <motion.button onClick={scrollToTop}>
        <UpOutlined className={styles.iconLeftDisplay} />
      </motion.button>
      <motion.div ref={carousel} className={styles.carousel}>
        <motion.div
          drag="y"
          dragConstraints={{ bottom: 0, top: -height }}
          className={styles.innerCarousel}
        >
         
          {isLoading ? <div className={styles.categoryCard}><Skeleton active={true} style={{ width: "200px" }} /><Skeleton.Button active={true} /></div> :
              category?.map((cat: any, i: number) => {
                
                return (
                  <motion.div
                    className={styles.categoryCard}
                    key={i}
                    onClick={showModal(cat)}
                  >
                    <Image
                      src={`${cat?.category_icon_url}`}
                      alt={"Image"}
                      className={styles.imageDisplay}
                      preview={false}
                    />
                    <div className={styles.categoryText}>{cat.name}</div>
                  </motion.div>
                );
              })}
             
        </motion.div>
      </motion.div>
      <motion.button onClick={scrollToBottom}>
        <DownOutlined className={styles.iconRightDisplay} />
      </motion.button>
      <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}
          categoryTree={categoryTree}
          category={category}
          page="home"
        />
      </Modal>
    </div>
  );
};

export default CategoryCardContainer;