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 {useEffect, useState} from 'react'
import ProductsGrid from "../../Components/products/ProductsGrid";
import {Pagination} from "@mui/material";
import GridVIewIcon from './../../assets/images/GridViewIcon.svg'
import ListNiewIcon from './../../assets/images/ListViewIcon.svg'
import ProductTable from "../../Components/products/ProductTable";
import FloatingItems from "../../Components/common/FloatingItems";
import {Link} from "react-router-dom";
import PublicApi from "../../api/PublicAPi";
import adminApi from "../../api/AdminApi";
import {userToken} from "../../api/TokenApi";

export default function Products() {
    const [totalPages, setTotalPages] = useState(1)
    const [pageNumber, setPageNumber] = useState(1)
    const [products, setProducts] = useState([])
    const [filterList, setFilterList] = useState([])
    const [orderedBy, setOrderedBy] = useState('default')
    const [viewMode, setViewMode] = useState('GridView')
    const options = [
        {
            value: 'title',
            name: 'عنوان'
        }
    ]

    const getProducts = async (pageNumber) => {
        const fetchedProducts = await PublicApi.get(`products/index/${await userToken()}?page=${pageNumber}`)
        setTotalPages(fetchedProducts.meta.last_page)
        setProducts(fetchedProducts.data)
    }
    useEffect(() => {
        getProducts(pageNumber)
    }, [pageNumber])

    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) => {
        setPageNumber(pageNumber)
    }

    const changeView = (viewName) => {
        setViewMode(viewName)
    }

    return (
        <div className="flex flex-col w-full space-y-4">
            <div className="flex justify-between h-fit">
                <div className="flex col-span-2 lg:col-span-1">
                    <div className={'flex items-center justify-start'}>
                        <Searchbar onChange={handleSearch}/>
                        <OptionsMenu options={options} orderedBy={orderedBy} onChangeOrder={handleOrder}/>
                    </div>
                    <div className={'flex flex-row items-center'}>
                        <button
                            className={`w-full h-full bg-white p-2 rounded-lg ${viewMode === 'GridView' ? 'bg-red-200' : null}`}
                            onClick={() => changeView('GridView')}
                        >
                            <img alt={'Grid View'} src={GridVIewIcon}/>
                        </button>
                        <button
                            className={`mr-2 w-full h-full bg-white p-2 rounded-lg ${viewMode === 'ListView' ? 'bg-red-200' : null}`}
                            onClick={() => changeView('ListView')}
                        >
                            <img alt={'List View'} src={ListNiewIcon}/>
                        </button>
                    </div>
                </div>
                <Link to={'add'}>
                    <CreateButton className="w-full" title="افزودن محصول"/>
                </Link>
            </div>
            {
                viewMode === 'GridView' ?
                    <>
                        <ProductsGrid products={products}/>
                        <div className={'flex flex-row pt-10 pb-16'} dir={'ltr'}>
                            <Pagination count={totalPages} variant="outlined" shape="rounded" size={'small'} onChange={handleChangePage}/>
                        </div>
                    </>
                    :
                    <div className="w-full flex flex-col rounded-2xl border-1">
                        <ProductTable products={products}/>
                        <div className={'flex flex-row py-6 pl-4'} dir={'ltr'}>
                            <Pagination count={totalPages} variant="outlined" shape="rounded" size={'small'} onChange={handleChangePage}/>
                        </div>
                    </div>
            }
        </div>
    );
}