import {CardActions, CardContent, CardMedia, Rating} from "@mui/material";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
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 Box from "@mui/material/Box";
import {CocktailDescription} from "./CocktailDescription";
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import LocalBarIcon from '@mui/icons-material/LocalBar';
import {paths} from "../../path";
import {useAlert} from "../../hooks/useAlert";
import {useUser} from "../../hooks/useUser";

function renderFavouriteBadge(handleFavourite, row) {
    const childIcon = row.rating.favourite ? <FavoriteIcon/> : <FavoriteBorderIcon/>;
    return (
        <IconButton size={'small'}
                    onClick={() => handleFavourite(row)}>
            {childIcon}
        </IconButton>
    )
}

function renderRating(handleChangeRating, row) {
    return (
        <Rating
            name="simple-controlled"
            value={row.rating.rating}
            onChange={(event, newValue) => handleChangeRating(row, newValue)}
        />
    )
}

export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, deleteHandler}) {
    const {notImplement} = useAlert();
    const {user} = useUser();
    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.includes("thecocktaildb") ? (row.image + "/preview") : row.image}
                    />
                    <CardActions>
                        <IconButton sx={{m: 0}} size='small' onClick={() => notImplement()}>
                            <LocalBarIcon fontSize='small'/>
                        </IconButton>
                        {renderFavouriteBadge(handleFavourite, row)}
                        {renderRating(handleChangeRating, row)}

                        {
                            (user.role && user.role !== 'USER') &&
                            <>
                                <IconButton size='small' href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
                                    <EditIcon fontSize='small'/>
                                </IconButton>
                                <IconButton size='small' onClick={() => deleteHandler(row)}>
                                    <DeleteIcon fontSize='small'/>
                                </IconButton>
                            </>

                        }
                    </CardActions>
                    <CardContent sx={{pb: 0, pl: 2, pt: 0}}>
                        <Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>
                        <CocktailDescription row={row}/>
                    </CardContent>
                </Box>
            </CocktailItemStyled>
        </Grid>
    )
}