import Searchbar from '../../Components/common/Searchbar';
import CreateButton from '../../Components/common/CreateButton';
import CategoryCard from '../../Components/categories/CategoryCard';
import OptionsMenu from "../../Components/common/OptionsMenu";
import {useEffect, useState} from 'react'
import CreateCategoryModal from "../../Components/categories/CreateCategoryModal";
import FilterBy from "../../Components/common/FilterBy";
import FloatingItems from "../../Components/common/FloatingItems";
import PublicApi from "../../api/PublicAPi";
import adminApi from "../../api/AdminApi";
import {userToken} from "../../api/TokenApi";
import AdminApi from "../../api/AdminApi";

export default function Categories() {

    // define states
    const [categories, setCategories] = useState([])
    const [filterList, setFilterList] = useState([])
    const [orderedBy, setOrderedBy] = useState('default')
    const [options, _] = useState([
        {
            value: 'title',
            name: 'عنوان'
        }
    ])

    // fetch data
    const getCategories = async () => {
        const fetchedCategories = await PublicApi.get(`categories/index/${await userToken()}`)
        setCategories(fetchedCategories)
    }
    useEffect(() => {
        getCategories()
    }, [])
    let [showCreateModal, setShowCreateModal] = useState(false);


    const handleSearch = (e) => {
        console.log(e.target.value)
    }
    const handleCloseCreateModal = () => {
        setShowCreateModal(false);
    }
    const handleCreateClick = () => {
        setShowCreateModal(true);
    }
    const handleOrder = (e) => {
        setOrderedBy(e.target.value)
    }


    const handleDelete = async (deleteId) => {
        await AdminApi.delete(`categories/delete/${deleteId}`).then(() => {
            window.location = '/panel/categories'
        })
    }

    const addFilter = (filterName) => {
        if (!filterList.includes(filterName)) {
            setFilterList([...filterList, filterName])
        }
    }
    const deleteFilter = (filterName) => {
        const newFilterList = filterList.filter((value) => value !== filterName)
        setFilterList(newFilterList)
    }


    return (
        <div className="relative flex flex-col h-full w-full space-y-6">
            <div className="flex justify-between h-fit">
                <div className={'flex flex-col items-start justify-center'}>
                    <div className={'flex items-center justify-start'}>
                        <Searchbar onChange={handleSearch}/>
                        <OptionsMenu options={options} orderedBy={orderedBy} onChangeOrder={handleOrder}/>
                    </div>
                </div>
                <CreateButton onClick={handleCreateClick} title="افزودن دسته بندی"/>
            </div>
            <div className="grid grid-cols-6 gap-4">
                {
                    categories.map((category, index) => (
                        <CategoryCard key={index} category={category} onDelete={handleDelete}/>
                    ))
                }
            </div>
            <CreateCategoryModal callback={getCategories} showCreateModal={showCreateModal} handleCloseCreateModal={handleCloseCreateModal}/>
        </div>
    );
}