import Searchbar from '../../Components/common/Searchbar';
import CreateButton from '../../Components/common/CreateButton';
import OptionsMenu from "../../Components/common/OptionsMenu";
import FilterBy from "../../Components/common/FilterBy";
import CloseIcon from './../../assets/images/CloseIcon.svg'
import {Pagination} from "@mui/material";
import ProductTable from "../../Components/products/ProductTable";
import OrdersTable from "../../Components/orders/OrdersTable";

import AdminApi from "../../api/AdminApi";
import {useEffect, useState} from 'react';
import {userToken} from "../../api/TokenApi";

export default function Orders() {

    const [orders, setOrders] = useState([])
    const getOrders = async () => {
        const fetchedOrders = await AdminApi.get(`orders/index`)
        setOrders(fetchedOrders.data)
    }
    useEffect(() => {
        getOrders()
    }, [])

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

    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)
    }

    const handleChangePage = (_, pageNumber) => {
        console.log(pageNumber)
        /*
        fetch page data
         */
    }

    return (
        <div className="flex flex-col 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>
            </div>
            <div className={'flex flex-row items-center justify-start'}>
                <FilterBy onAddFilter={addFilter}/>
                {
                    filterList.map((filterName, index) => (
                        <div key={index}
                             className={'h-[2.6rem] flex flex-row items-center bg-gray-100 font-[Vazirmatn] text-sm rounded-lg p-2 mx-3'}>
                            <img alt={'حذف'} className={'ml-1'} src={CloseIcon}
                                 onClick={() => deleteFilter(filterName)}/>
                            <div className={'mb-1'}>
                                {filterName}
                            </div>
                        </div>
                    ))
                }
            </div>
            <div className="w-full flex flex-col rounded-2xl border-1">
                <OrdersTable orders={orders}/>
                <div className={'flex flex-row py-6 pl-4'} dir={'ltr'}>
                    <Pagination count={10} variant="outlined" shape="rounded" size={'small'} onChange={handleChangePage}/>
                </div>
            </div>
        </div>
    );
}