import * as React from 'react';
import {useEffect, useState} from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import {ButtonGroup} from "@mui/material";
import {requests} from "../../requests";
import {useAlert} from "../../hooks/useAlert";
import {api} from "../../lib/clients/api";

function renderButtons(row, my, handleChange) {
    if (my) {
        if (row.status === "NEW") {
            return (
                <ButtonGroup variant="contained">
                    <Button color="error" onClick={() => handleChange(row, "CANCEL")}>Отмена</Button>
                </ButtonGroup>
            );
        } else {
            return null;
        }
    } else {
        return (
            <ButtonGroup variant="contained">
                <Button color="success" onClick={() => handleChange(row, "DONE")}>Выполнен</Button>
                <Button color="error" onClick={() => handleChange(row, "CANCEL")}>Отмена</Button>
            </ButtonGroup>
        )
    }
}

export default function OrderModal({row, handleClose, open, handleChange, my}) {
    const [receipt, setReceipt] = useState([]);
    const [instructions, setInstructions] = useState();
    const {createError} = useAlert();

    useEffect(() => {
        if (!row) {
            return;
        }
        api().get(requests.bar.receipts + row.cocktail.id)
            .then((r) => setReceipt(r.data))
            .catch(() => createError("Ошибка получения рецепта"))

        api().get(requests.cocktails.instructions + row.cocktail.id)
            .then((r) => setInstructions(r.data))
            .catch(() => createError("Ошибка получения инструкции"))
        // eslint-disable-next-line
    }, [row]);

    if (!row) {
        return null;
    }
    return (
        <Dialog
            fullWidth={true}
            maxWidth="350px"
            open={open}
            onClose={handleClose}
        >
            <DialogTitle>{"Заказ №" + row.id}</DialogTitle>
            <DialogContent>
                <DialogContentText>{row.cocktail.name}</DialogContentText>
                <DialogContentText>{"для: " + row.visitor.name + " " + row.visitor.lastName}</DialogContentText>
                <Box noValidate component="form"
                     sx={{display: 'flex', flexDirection: 'column', m: 'auto', width: 'fit-content',}}>
                    <Stack>
                        <img src={row.cocktail.image} alt={row.cocktail.name} loading={"eager"} width={"300"}/>
                        <Typography>Ингредиенты:</Typography>
                        <Stack pl={1}>
                            {receipt.map((r) => {
                                return (<Typography key={r.id}>{`${r.ingredient.name} - ${r.measure}`}</Typography>)
                            })}
                        </Stack>
                        {instructions &&
                            (
                                <>
                                    <Typography>Инструкция:</Typography>
                                    <Typography pl={1}>{instructions}</Typography>
                                </>
                            )
                        }

                        {row.cocktail.video && (<iframe width="350" /*height="315"*/
                                                        src={row.cocktail.video}
                                                        title="YouTube video player"
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                        referrerPolicy="strict-origin-when-cross-origin"
                                                        allowFullScreen></iframe>)}
                    </Stack>
                </Box>
            </DialogContent>
            <DialogActions sx={{justifyContent: "space-between"}}>
                {renderButtons(row, my, handleChange)}
                <Button onClick={handleClose}>Close</Button>
            </DialogActions>
        </Dialog>
    );
}