import {CardActions, CardContent, CardMedia, Rating} from "@mui/material";
import {useAlert} from "../../hooks/useAlert";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import {requests} from "../../requests";
import {CocktailItemStyled} from "./CocktailItemStyled";
import IconButton from "@mui/material/IconButton";
import FavoriteBorderIcon from '@mui/icons-material/FavoriteTwoTone';
import FavoriteIcon from '@mui/icons-material/Favorite';
import {api} from "../../lib/clients/api";
import Box from "@mui/material/Box";
import {useUser} from "../../hooks/useUser";

function renderFavouriteBadge(handleFavourite, row) {
    const childIcon = row.rating.favourite ? <FavoriteIcon color='error'/> : <FavoriteBorderIcon color={'warning'}/>;
    return (
        <IconButton sx={{position: 'absolute', top: "15px", right: "15px"}} onClick={() => handleFavourite(row)}>
            {childIcon}
        </IconButton>
    )
}

function renderRating(handleChangeRating, row) {
    return (
        <Rating
            sx={{position: 'absolute', top: '310px', right: '85px'}}
            name="simple-controlled"
            size="large"
            value={row.rating.rating}
            onChange={(event, newValue) => handleChangeRating(row, newValue)}
        />
    )
}

export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, editMenuBlock}) {
    const {createAlert, createError} = useAlert();
    const {session, user} = useUser();

    function pay(cocktailId) {
        api().post(`${requests.bar.pay}cocktail=${cocktailId}`)
            .then(() => createAlert("Ожидайте свой заказ", "success"))
            .catch(() => createError("Ошибка во время создания заказа"))
    }

    return (
        <Grid item sx={{pr: 2}}>
            <CocktailItemStyled>
                <Box sx={{
                    p: '4px 4px',
                    m: 1,
                    width: '320px',
                    position: 'relative',
                }}>
                    <CardMedia
                        sx={{
                            loading: "eager",
                            borderRadius: 2
                        }}
                        onClick={() => handleSelect(row)}
                        component="img"
                        alt={row.name}
                        height="300"

                        image={`${row.image}/preview`}
                    />
                    {renderFavouriteBadge(handleFavourite, row)}
                    {renderRating(handleChangeRating, row)}
                    <CardContent sx={{pb: '4px', pl: 2}}>
                        <Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>
                        <List sx={{py: '0px'}}>
                            {row.hasError && (
                                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                    <ListItemText color={'red'}>Имеет ошибку в рецепте или ингредиентах</ListItemText>
                                </ListItem>
                            )}
                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                <ListItemText>{"Категория: " + row.category}</ListItemText>
                            </ListItem>
                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                <ListItemText>{"Алкоголь: " + row.alcoholic}</ListItemText>
                            </ListItem>
                            {row.volume !== null && (
                                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                    <ListItemText>{"Крепость: ≈" + row.volume}</ListItemText>
                                </ListItem>
                            )}
                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                <ListItemText>{"Подача: " + row.glass}</ListItemText>
                            </ListItem>
                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                <ListItemText>{"Состав: " + row.components}</ListItemText>
                            </ListItem>
                            {(row.tags && row.tags.length > 0) && (
                                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                                    <ListItemText>{"Теги: " + row.tags.replaceAll(',', ', ')}</ListItemText>
                                </ListItem>)}
                        </List>
                    </CardContent>
                    <CardActions>
                        {(row.isAllowed && session.isActive && user.invited) &&
                            <Button variant="contained" onClick={() => pay(row.id)}>Заказать</Button>
                        }
                        {editMenuBlock(row)}
                    </CardActions>
                </Box>
            </CocktailItemStyled>
        </Grid>
    )
}