import Searchbar from "../../Components/common/Searchbar";
import OptionsMenu from "../../Components/common/OptionsMenu";
import {Link} from "react-router-dom";
import CreateButton from "../../Components/common/CreateButton";
import FilterBy from "../../Components/common/FilterBy";
import FloatingItems from "../../Components/common/FloatingItems";
import { useState, useEffect } from "react";
import ArticlesGrid from "../../Components/articles/ArticleGrid";
import ArticleCard from "../../Components/articles/ArticleCard";
import {userToken} from "../../api/TokenApi";
import CmsAPi from "../../api/CmsAPi";


export default function Articles() {
    const [articles, setArticles] = useState([])
    const [filterList, setFilterList] = useState([])
    const [orderedBy, setOrderedBy] = useState('default')
    const options = [
        {
            value: 'title',
            name: 'عنوان'
        }
    ]
    const getArticles = async () => {
        const fetchedArticles = await CmsAPi.get(`blog/index/${await userToken()}`)
        console.log(fetchedArticles);
        setArticles(fetchedArticles)
    }
    useEffect(() => {
        getArticles()
    }, [])

    const handleSearch = (e) => {
        console.log(e.target.value)
    }

    const handleOrder = (e) => {
        setOrderedBy(e.target.value)
    }

    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="flex flex-col w-full space-y-6 pb-5">
            <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>
                <Link to={'add'}>
                    <CreateButton title="افزودن مقاله"/>
                </Link>
            </div>
            <div className={'flex flex-row items-center justify-start'}>
                <div className={'flex flex-row items-center justify-start'}>
                    <FilterBy onAddFilter={addFilter}/>
                    <FloatingItems containerClassName={'flex flex-row items-center justify-start'} onDelete={deleteFilter} itemsList={filterList}/>
                </div>
            </div>
            <div>
                {
                    articles.map((article, index) => (
                        <div key={index} className={'flex flex-col justify-center items-start mb-5'}>
                            <div className={'flex flex-row overflow-x-scroll items-center justify-start mt-3 w-full'}>
                                <ArticleCard article={article} asd={index%2} className={'mx-3'}/>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    );
}