import {Card, FormControl, FormControlLabel, InputAdornment, InputLabel, OutlinedInput} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import Tooltip from "@mui/material/Tooltip";
import FilterListIcon from "@mui/icons-material/FilterList";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Switch from "@mui/material/Switch";
import CheckMarks from "./CheckMarks";
import Button from "@mui/material/Button";
import * as React from "react";
import {useEffect, useState} from "react";
import {useAlert} from "../../hooks/useAlert";
import {categoryClient} from "../../lib/clients/CategoryClient";
import {glassClient} from "../../lib/clients/GlassClient";

export function FilterBlock({filter, handleFilterChange, handleClearFilter, barmen}) {
    const {createError} = useAlert();
    const [glass, setGlass] = useState([]);
    const [category, setCategory] = useState([]);
    const alcohol = ['Алкогольный', 'Безалкогольный'];
    const ingredientCount = [1, 2, 3, 4, 5];
    const sort = ['Название по возрастанию', 'Название по убыванию'];

    useEffect(() => {
        categoryClient.getCategoryList(setCategory, createError)
        glassClient.getGlassList(setGlass, createError)
        // eslint-disable-next-line
    }, []);

    return (
        <Card>
            {/*Строка поиска*/}
            <FormControl sx={{m: 1, width: '300px'}}>
                <InputLabel htmlFor="outlined-adornment-amount">Поиск</InputLabel>
                <OutlinedInput
                    onChange={(e) => handleFilterChange("search", e.target.value)}
                    label="With normal TextField"
                    startAdornment={
                        <InputAdornment position="start">
                            <IconButton edge="end">
                                <SearchIcon/>
                            </IconButton>
                        </InputAdornment>
                    }
                />
            </FormControl>
            {/*Кнопка открытия фильтров*/}
            <Tooltip title="Filter list">
                <IconButton onClick={() => handleFilterChange("hidden", !filter.hidden)}>
                    <FilterListIcon/>
                </IconButton>
            </Tooltip>
            {/*Блок сортировки*/}
            <Box hidden={filter.hidden}>
                <Grid container>
                    {/*Фильтр по алкогольности*/}
                    <CheckMarks rows={sort} name={"Сортировать по..."} handleChange={handleFilterChange}
                                filterValue={filter.sorting} filterName={"sorting"} nonMulti identity/>
                </Grid>
            </Box>
            {/*Блок фильтров*/}
            <Box hidden={filter.hidden}>
                <Grid container>
                    {/*Фильтр по избранным*/}
                    <FormControlLabel
                        control={
                            <Switch inputProps={{'aria-label': 'controlled'}}
                                    onChange={() => handleFilterChange("onlyFavourite", !filter.onlyFavourite)}
                            />
                        }
                        label="Только избранные"
                        sx={{ml: 1}}
                    />
                    {/*Фильтр по избранным*/}
                    <FormControlLabel
                        control={
                            <Switch inputProps={{'aria-label': 'controlled'}}
                                    onChange={() => handleFilterChange("all", !filter.all)}
                            />
                        }
                        label={!filter.all ? "Полный список" : "Только доступные"}
                        sx={{ml: 1}}
                    />
                    {/*Фильтр по алкогольности*/}
                    <CheckMarks rows={alcohol} name={"Алкогольность"} handleChange={handleFilterChange}
                                filterValue={filter.alcohol} filterName={"alcohol"} identity/>
                    {/*Фильтр по категории*/}
                    {category.length > 0 && (
                        <CheckMarks rows={category} name={"Категории"} filterValue={filter.category}
                                    filterName={"category"} handleChange={handleFilterChange}/>)}
                    {/*Фильтр по посуде*/}
                    {glass.length > 0 && (<CheckMarks rows={glass} name={"Подача"} handleChange={handleFilterChange}
                                                      filterValue={filter.glass} filterName={"glass"}/>)}
                    {/*Фильтр по нехватке ингредиентов*/}
                    {(barmen && filter.all) && (<CheckMarks rows={ingredientCount} name={"Не хватает ингредиентов"}
                                                            handleChange={handleFilterChange}
                                                            nonMulti nullValue identity
                                                            filterValue={filter.iCount} filterName={"iCount"}/>)}
                    <Button onClick={() => handleClearFilter()}>Сбросить</Button>
                </Grid>
            </Box>
        </Card>
    )
}