import { Button } from "antd";
import { FC, useContext, useEffect, useState } from "react";
import styles from "./categoryComponent.module.scss";
import cx from "classnames";
import * as CommonApi from "../../../pages/api/common";
import { baseUrl, defaultImg } from "../../../constants/urls";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import { useRouter } from "next/router";
import shopConetxt from "../../../context/shopConetxt";
import Head from "next/head";

const CategoryComponent: FC<any> = () => {
    const { setCategoryTreeNested, setCategoryBreadcrumb, categoryTreeNested } =
    useContext(shopConetxt);
    const category1 = new Array(12).fill(null);
    const router = useRouter();
    const [category, setCategory] = useState([]);
    useEffect(() => {
        CommonApi.getRequest(`${baseUrl}/api/home/trending-categories`).then((res) => {
            setCategory(res?.data?.data)
        })
    }, [])

    const handleCategorySelect = (categoryId: any) => {
        // const breadCrumbData = createBreadcrumb(categoryId);
        // setCategoryBreadcrumb(breadCrumbData);
        const flattenCategory = getFlattenCategory(categoryTreeNested);
        const breadCrumbData = createBreadcrumb(categoryId, flattenCategory);
        setCategoryBreadcrumb(breadCrumbData);
        router.push({
          pathname: `/products/${categoryId}`,
        });
      };
    

    return (
        <>
            
                <div className={styles.containerCategory}>
                <div className="container">
                    <div className={styles.sectionSubTitle}>Trending Categories</div>

                    <div className={styles.cardContainer}>
                        {category.map((data: any, idx: number) => {
                            const img =
                                data.image === null && data.image_url === null
                                    ? data.category_icon_path
                                    : data.image;
                           
                            return <div className={cx(styles.card,"cursor-pointer")} key={idx} onClick={()=>handleCategorySelect(data?.category_id)}>
                                <img src={img == null ? `${defaultImg}` : `${baseUrl}/cache/small/${img}`} className={styles.image} />
                                <div className={styles.cardTitle}>{data.name} </div>
                                {/* <div className={styles.offerTitle}>Upto 49% Off</div> */}
                                <Button type="primary" className={cx("mt-2",styles.button)} onClick={()=>handleCategorySelect(data?.category_id)}>View All Products</Button>
                            </div>
                        })}
                    </div>
                </div>
            </div>
        </>
    )

}

export default CategoryComponent;