import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import {Fab, FormControl, FormControlLabel, InputAdornment, InputLabel, OutlinedInput} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import Switch from "@mui/material/Switch";
import {blue} from "@mui/material/colors";
import UpIcon from "@mui/icons-material/KeyboardArrowUp";
import {Loading} from "../../../components/core/Loading";
import * as React from "react";
import {useEffect, useMemo, useState} from "react";
import {CocktailsList} from "../../../components/cocktails/CocktailsList";
import {requests} from "../../../requests";
import {api} from "../../../lib/clients/api";
import {useAlert} from "../../../hooks/useAlert";
import {CocktailInfoModal} from "../../../components/cocktails/CocktailInfoModal";
import {useSelect} from "../../../hooks/useSelect";

export function CocktailMenuBarPage() {
    const {createError} = useAlert();
    const [grouping, setGrouping] = useState(true);
    const [findString, setFindString] = useState("");
    const [loading, setLoading] = useState(true);
    const [cocktails, setCocktails] = useState([]);
    const {setCocktail, state} = useSelect();

    useEffect(() => {
        api().get(`${requests.cocktails.menu}?all=true`)
            .then((r) => {
                setCocktails(r.data);
                setLoading(false);
            })
            .catch(() => createError("Ошибка получения данных"))
        // eslint-disable-next-line
    }, []);


    const handleOpenModal = (row) => {
        setCocktail(row);
    }
    const changeHandler = (row, value) => {
        const newState = cocktails.map((r) => {
            if (r.id !== row.id) {
                return r;
            }
            return {
                ...r,
                inMenu: value
            }
        });
        api().post(`${requests.cocktails.menu}?id=${row.id}&value=${value}`)
            .then(() => {
                setCocktails(newState);
            }).catch(() => createError("Ошибка сохранения данных"))
    }

    const visibleRows = useMemo(() => {
        if (findString === "") {
            return cocktails;
        }
        let regExp = new RegExp("(.*?)" + findString + "(.*?)", "i");
        return cocktails
            .filter((row) => row.name.split(" ").map((n) => n.match(regExp) !== null).includes(true))
        // eslint-disable-next-line
    }, [cocktails, findString])

    return (
        <Box>
            {/*Заголовок*/}
            <Toolbar>
                <Typography variant="h6" component="div" sx={{flexGrow: 1}}>Меню бара</Typography>
            </Toolbar>
            {/*Поиск*/}
            <Paper elevation={6} sx={{my: 2}}>
                <FormControl sx={{m: 1, width: 'calc(100% - 20px'}}>
                    <InputLabel htmlFor="outlined-adornment-amount">Поиск</InputLabel>
                    <OutlinedInput
                        onChange={(e) => setFindString(e.target.value)}
                        label="With normal TextField"
                        startAdornment={
                            <InputAdornment position="start">
                                <IconButton edge="end">
                                    <SearchIcon/>
                                </IconButton>
                            </InputAdornment>
                        }
                    />
                </FormControl>
                <FormControlLabel sx={{ml: '2px'}}
                                  control={<Switch defaultChecked/>}
                                  onClick={() => setGrouping(!grouping)}
                                  label="Группировать"
                                  labelPlacement="end"/>
            </Paper>
            {/*Рабочее поле коктейлей*/}
            <CocktailsList rows={visibleRows} changeHandler={changeHandler}
                           infoHandler={handleOpenModal} grouping={grouping}/>
            {/*Иконка возврата наверх*/}
            <Fab sx={{
                alpha: '30%',
                position: 'sticky',
                bottom: '16px',
                color: 'common.white',
                bgcolor: blue[600],
                '&:hover': {
                    bgcolor: blue[600],
                },
            }}
                 onClick={() => window.window.scrollTo(0, 0)}
                 aria-label='Expand'
                 color='inherit'>
                <UpIcon/>
            </Fab>
            {/*Загрузчик*/}
            <Loading loading={loading}/>
            {/*Модальное окно информации об ингредиенте*/}
            <CocktailInfoModal row={state.cocktail}/>
        </Box>
    )
}