'use client';
import Breadcrumb from "@/sheardComponent/Breadcrumb";
import React, {useEffect, useState} from "react";
import Cta from "../home/Cta";
import AboutSection from "../home-two/AboutSection";
import httpClient from "@/utils/HttpClient";
import Link from "next/link";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { usePathname  } from 'next/navigation';

const FabenCategories = () => {
    const [categoriesLoading, setCategoriesLoading] = useState(false);
    const [isVisibleCats, setIsVisibleCats] = useState(true);
    const [categories, setCategories] = useState([]);
    const [activeCategory, setActiveCategory] = useState(0);
    const router = usePathname();
    const [activeName, setActiveName] = useState("")
    useEffect(() => {
        if (router){
            const spl = router.split("/");
            const last= spl[spl.length-1];
            setActiveName(last)
        }
    },[router])
    const handleCategoryClick = (categoryId: any) => {
        setActiveCategory(categoryId);
    };

    useEffect(() => {
        const fetch = async () => {
            setCategoriesLoading(true);
            const res = await httpClient.get("categories");
            console.log(res);
            setCategories(res.data);
            setCategoriesLoading(false);
        };

        fetch();
    }, []);

    return (
        <div className="col-xl-2 col-lg-2 col-md-12 col-sm-12">
            {categoriesLoading && <Skeleton count={10}/>}
            {!categoriesLoading && (
                <div className="widget mt-50 mb-50 faben-blue-bg">
                    <div
                        className="widget-title-box"
                        onClick={() => setIsVisibleCats(!isVisibleCats)}
                    >
                        {isVisibleCats ? (
                            <i
                                style={{color: "#fff", fontSize: "1.4rem"}}
                                className="fas fa-arrow-down cursor-pointer p-3"
                            ></i>
                        ) : (
                            <i
                                style={{color: "#fff", fontSize: "1.4rem"}}
                                className="fas fa-arrow-up p-3 cursor-pointer"
                            ></i>
                        )}
                        <p
                            className="widget-title"
                            style={{color: "white", paddingTop: "19px"}}
                        >
                            Kategoriler
                        </p>
                    </div>
                    {isVisibleCats && (
                        <ul
                            className={`cat white-bg pt-2 pb-2`}>
                            {categories.map((item: any) => (
                                <li
                                    key={item.id}
                                    className={activeName === item.seoFriendlyName ? "active" : ""}
                                    onClick={() => handleCategoryClick(item.id)}
                                >
                                    <Link href={`/product-category/${item.seoFriendlyName}`}>
                                        &nbsp;&nbsp;&nbsp;{item.name}

                                    </Link>
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            )}
        </div>
    );
};

export default FabenCategories;