import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import * as React from "react";
import {useEffect, useState} from "react";
import {CardMedia} from "@mui/material";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import StarBorderIcon from '@mui/icons-material/StarBorder';
import IconButton from "@mui/material/IconButton";
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import DeleteIcon from '@mui/icons-material/Delete';
import {IngredientInfoModal} from "../Ingredients/IngredientInfoModal";
import {useAlert} from "../../hooks/useAlert";
import {paths} from "../../path";
import {Loading} from "../core/Loading";
import {useUser} from "../../hooks/useUser";
import {useSelect} from "../../hooks/useSelect";
import {cocktailClient} from "../../lib/clients/CocktailClient";
import {ingredientClient} from "../../lib/clients/IngredientClient";

export function CocktailInfoModal({row}) {
    const {user} = useUser();
    const {getError, createError, createSuccess} = useAlert();
    const [cocktail, setCocktail] = useState(null)
    const [loading, setLoading] = useState(false);
    const {closeCocktail, selectIngredient, getIngredient, getOpenCocktail} = useSelect();

    // eslint-disable-next-line
    useEffect(() => cocktailClient.getCocktailForModal(row, setLoading, setCocktail, closeCocktail, getError), [row]);

    if (!row || !cocktail) {
        return null;
    }
    return (
        <Dialog fullWidth={true}
                open={getOpenCocktail()} onClose={closeCocktail}
                sx={{
                    '& .MuiDialog-paper': {
                        margin: '8px',
                    },
                    '& .MuiPaper-root': {
                        width: 'calc(100% - 16px)',
                    }
                }}>
            <IngredientInfoModal ingredient={getIngredient()}/>
            <Loading loading={loading}/>
            <DialogTitle>
                <Stack direction='row' justifyContent={'space-between'}>
                    <Box>{cocktail.name}</Box>

                    {cocktail.rating.rating > 0 &&
                        (
                            <Stack ml={3} direction='row'>
                                {`${cocktail.rating.rating}/5`}
                                <StarBorderIcon sx={{pb: "2px"}}/>
                            </Stack>
                        )
                    }
                </Stack>
            </DialogTitle>
            <DialogContent>
                <CardMedia
                    image={cocktail.image.includes("thecocktaildb") ? (cocktail.image + "/preview") : cocktail.image}
                    sx={{
                        loading: "eager",
                        borderRadius: 2
                    }}
                    component="img"
                    alt={cocktail.name}
                    height="300"
                />
                <Box mt={1}>
                    <Typography>Ингредиенты:</Typography>
                    <Paper sx={{p: 1}} elevation={3}>
                        <Stack>
                            {cocktail.receipt.map((r) => {
                                const hasError = r.count === null || r.unit === null;
                                const measure = hasError ? r.measure : (r.count + " " + r.unit.name)
                                return (
                                    <Stack key={r.ingredient.id} direction='row' justifyContent={'space-between'}
                                           mt={1}>
                                        <Stack direction='row'>
                                            {(user.role && user.role !== "USER") && (
                                                <IconButton size="small" sx={{pb: "2px"}}
                                                            onClick={() => ingredientClient.changeIngredientInBar(r.ingredient, cocktail, setCocktail, createSuccess, createError)}>
                                                    {r.ingredient.isHave
                                                        ? (<DeleteIcon fontSize="small"/>)
                                                        : (<ShoppingCartIcon fontSize="small"/>)
                                                    }
                                                </IconButton>
                                            )}
                                            <Typography
                                                onClick={() => ingredientClient.findOne(r.ingredient.id, selectIngredient, createError)}>{r.ingredient.name}</Typography>
                                        </Stack>
                                        <Typography color={hasError && 'red'}>{measure}</Typography>
                                    </Stack>
                                )
                            })}
                        </Stack>
                    </Paper>
                </Box>
                <Box>
                    <Typography mt={2}>Инструкция:</Typography>
                    <Paper sx={{p: 1}} elevation={3}>
                        <Box>
                            {cocktail.instructions}
                        </Box>
                    </Paper>
                </Box>
            </DialogContent>
            <DialogActions>
                {(user.role && user.role.includes("ADMIN")) && (
                    <Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
                )}
                <Button onClick={closeCocktail}>Закрыть</Button>
            </DialogActions>
        </Dialog>
    )
}