my-bar/front/src/components/cocktails/CocktailInfoModal.js

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 {api} from "../../lib/clients/api";
import {requests} from "../../requests";
import {useAlert} from "../../hooks/useAlert";
import {paths} from "../../path";
import {Loading} from "../core/Loading";
import {useUser} from "../../hooks/useUser";
import {useSelect} from "../../hooks/useSelect";

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();
    const openIngredientModalHandler = (id) => {
        api().get(`${requests.bar.ingredient}?id=${id}`)
            .then((r) => {
                selectIngredient(r.data)
            })
            .catch(() => createError("Ошибка получения информации об ингредиенте"))
    }
    const selectIngredientHandler = (ingredient) => {
        const url = `${requests.bar.ingredient}?id=${ingredient.id}`;
        const request = ingredient.isHave ? api().delete(url) : api().put(url);
        const value = !ingredient.isHave;
        request.then(() => {
            const newReceipts = cocktail.receipt.map((r) => {
                if (r.ingredient.id !== ingredient.id) {
                    return r;
                }
                return {
                    ...r,
                    ingredient: {
                        ...ingredient,
                        isHave: value
                    }
                }
            })
            setCocktail({
                ...cocktail,
                receipt: newReceipts
            })
            createSuccess("Сохранено")
        }).catch(() => createError("Ошибка сохранения"))
    }

    useEffect(() => {
        setLoading(true)
        if (!row) {
            setLoading(false)
            return;
        }
        api().get(requests.cocktails.modal + row)
            .then((r) => {
                setCocktail(r.data)
                setLoading(false)
            })
            .catch(() => {
                getError();
                setLoading(false)
                closeCocktail();
            })
        // eslint-disable-next-line
    }, [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" && (
                                                <IconButton size="small" sx={{pb: "2px"}}
                                                            onClick={() => selectIngredientHandler(r.ingredient)}>
                                                    {r.ingredient.isHave
                                                        ? (<DeleteIcon fontSize="small"/>)
                                                        : (<ShoppingCartIcon fontSize="small"/>)
                                                    }
                                                </IconButton>
                                            )}
                                            <Typography
                                                onClick={() => openIngredientModalHandler(r.ingredient.id)}>{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.includes("ADMIN") && (
                    <Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
                )}
                <Button onClick={closeCocktail}>Закрыть</Button>
            </DialogActions>
        </Dialog>
    )
}