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 {requests} from "../../requests";
import {useAlert} from "../../hooks/useAlert";
import {api} from "../../lib/clients/api";
import {sortList} from "./sortingList";

const inMenuFilter = [
    {
        id: true,
        name: "Есть в меню"
    },
    {
        id: false,
        name: "Нет в меню"
    }
]

export function FilterBlock({filter, handleFilterChange, handleClearFilter, barmen, all}) {
    const {createError} = useAlert();
    const [glass, setGlass] = useState([]);
    const [category, setCategory] = useState([]);
    const [tags, setTags] = useState([])
    const alcohol = [
        {
            name: "Алкогольный",
            id: "alcohol1"
        },
        {
            name: "Безалкогольный",
            id: "alcohol2"
        },
        {
            name: "Опционально",
            id: "alcohol3"
        }];
    const ingredientCount = [
        {
            id: "1IngredientCount",
            name: 1
        },
        {
            id: "2IngredientCount",
            name: 2
        },
        {
            id: "3IngredientCount",
            name: 3
        },
        {
            id: "4IngredientCount",
            name: 4
        },
        {
            id: "5IngredientCount",
            name: 5
        }]

    useEffect(() => {
        api().get(requests.bar.category)
            .then((r) => setCategory(r.data))
            .catch(() => createError("Ошибка получения категорий"))

        api().get(requests.bar.glass)
            .then((r) => setGlass(r.data))
            .catch(() => createError("Ошибка получения посуды"))

        api().get(requests.bar.tags)
            .then((r) => setTags(r.data))
            .catch(() => 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={sortList} name={"Сортировать по..."} handleChange={handleFilterChange}
                                filterValue={filter.sorting} filterName={"sorting"} nonMulti/>
                </Grid>
            </Box>
            {/*Блок фильтров*/}
            <Box hidden={filter.hidden}>
                <Grid container>
                    {/*Фильтр по меню*/}
                    {(barmen && all) && (
                        <CheckMarks rows={inMenuFilter} name={"Есть в меню"} filterName={"inMenu"}
                                    filterValue={filter.inMenu}
                                    handleChange={handleFilterChange}
                                    nonMulti nullValue
                        />
                    )}
                    {/*Фильтр по избранным*/}
                    <FormControlLabel
                        control={
                            <Switch inputProps={{'aria-label': 'controlled'}}
                                    onChange={() => handleFilterChange("onlyFavourite", !filter.onlyFavourite)}
                            />
                        }
                        label="Только избранные"
                        sx={{ml: 1}}
                    />
                    {/*Фильтр по алкогольности*/}
                    <CheckMarks rows={alcohol} name={"Алкогольность"} handleChange={handleFilterChange}
                                filterValue={filter.alcohol} filterName={"alcohol"}/>
                    {/*Фильтр по категории*/}
                    {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"}/>)}
                    {/*Фильтр по тегам*/}
                    {tags.length > 0 && (<CheckMarks rows={tags} name={"Теги"} handleChange={handleFilterChange}
                                                     filterValue={filter.tags} filterName={"tags"}/>)}
                    {/*Фильтр по нехватке ингредиентов*/}
                    {/*todo: доделать эти фильтры в беке*/}
                    {/*{(barmen && all) && (<CheckMarks rows={ingredientCount} name={"Не хватает ингредиентов"}*/}
                    {/*                                 handleChange={handleFilterChange}*/}
                    {/*                                 nonMulti nullValue*/}
                    {/*                                 filterValue={filter.iCount} filterName={"iCount"}/>)}*/}
                    <Button onClick={() => handleClearFilter()}>Сбросить</Button>
                </Grid>
            </Box>
        </Card>
    )
}