import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import * as React from "react";
import {useEffect, useState} from "react";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import {useAlert} from "../../hooks/useAlert";
import ListItem from "@mui/material/ListItem";
import {useSelect} from "../../hooks/useSelect";
import {IngredientAlert} from "./IngredientAlert";
import {useUser} from "../../hooks/useUser";
import {cocktailClient} from "../../lib/clients/CocktailClient";

export function IngredientInfoModal({ingredient, handleDelete}) {
    const {user} = useUser();
    const [cocktails, setCocktails] = useState([]);
    const {closeIngredient, getOpenIngredient, selectCocktail} = useSelect();
    const {createError} = useAlert();
    const [open, setOpen] = React.useState(false);

    const handleClose = () => {
        setOpen(false);
    };

    useEffect(() => {
        cocktailClient.getCocktailByIngredient(ingredient, setCocktails)
            .catch(() => createError())
        // eslint-disable-next-line
    }, [ingredient]);

    if (!ingredient) {
        return null;
    }
    return (
        <Dialog fullWidth={true} maxWidth="350px" open={getOpenIngredient()} onClose={closeIngredient}
                sx={{
                    '& .MuiDialog-paper': {
                        margin: '8px',
                    },
                    '& .MuiPaper-root': {
                        width: 'calc(100% - 16px)',
                    }
                }}>
            <DialogTitle>{ingredient.name}</DialogTitle>
            <DialogContent>
                <Stack spacing={2} sx={{justifyContent: "center"}}>
                    <img src={ingredient.image} alt={ingredient.name} loading={"eager"} width={"300"}/>
                    {ingredient.alcohol && (<Typography>{`Крепость ${ingredient.abv}`}</Typography>)}
                    <Typography>{ingredient.description}</Typography>
                </Stack>
                {cocktails.length > 0 && (
                    <>
                        <Typography sx={{mt: 2}}>Коктейли:</Typography>
                        <List>
                            {cocktails.map((c) => {
                                return (
                                    <ListItem key={c.id} onClick={() => {
                                        selectCocktail(c.id)
                                        closeIngredient();
                                    }}>
                                        <Stack direction={'row'}>
                                            <img src={c.image} alt={c.name} loading={"eager"} width={"50"}/>
                                            <Typography sx={{mx: 1}}>{c.name}</Typography>
                                            {c.rating.rating > 0 && <Typography> {`${c.rating.rating}/5`}</Typography>}
                                        </Stack>
                                    </ListItem>
                                )
                            })}
                        </List>
                    </>
                )}
            </DialogContent>
            <DialogActions>
                {user.role !== 'USER' && <Button onClick={() => setOpen(true)}>Удалить</Button>}
                <Button onClick={closeIngredient}>Закрыть</Button>
            </DialogActions>
            <IngredientAlert handleDelete={handleDelete} handleClose={handleClose} open={open} id={ingredient.id}
                             handleCloseParent={closeIngredient}/>
        </Dialog>
    );
}