import {
    Avatar,
    Card,
    CardActions,
    CardContent,
    CardHeader,
    CardMedia,
    Typography,
    Grid,
} from '@mui/material'
import { useCallback } from 'react'
import { CartButton } from './cart-button'
import { useAppSelector, shop, useAppDispatch, basket } from '../storage'
import { withProtection } from '../hocs'
import { toast } from 'react-toastify'

export type ProductDetailProps = {
    productId: number
}

export const ProductDetail = withProtection(({ productId }: ProductDetailProps) => {
    const product = useAppSelector(shop.selector.product(productId))
    const error = useAppSelector(basket.selector.error)

    const user_count = useAppSelector(basket.selector.userCount(productId))

    const dispatch = useAppDispatch()

    const handleCart = useCallback(
        (num: number) => {
            if (num > 0) {
                dispatch(basket.fetch.addProduct({ product_id: product?.id || -1 }))
                dispatch(shop.action.changeCount({ productId, count: -1 }))
            } else {
                dispatch(basket.fetch.deleteProduct({ product_id: product?.id || -1 }))
                dispatch(shop.action.changeCount({ productId, count: 1 }))
            }
        },
        [dispatch]
    )
    if (error) {
        toast.error(error || 'Не известная ошибка при аутентификации пользователя', {
            toastId: 'error-toast',
        })
    }

    return (
        <Grid container direction="column" justifyContent="center" alignItems="center">
            <Card
                elevation={1}
                sx={{
                    maxWidth: 750,
                    width: '100%',
                    minWidth: 345,
                    display: 'flex',
                    flexFlow: 'column',
                    height: '100%',
                }}
            >
                <CardHeader
                    avatar={
                        <Avatar sx={{ bgcolor: 'info.main' }} aria-label="recipe">
                            {product?.name[0]}
                        </Avatar>
                    }
                    title={product?.name}
                    subheader={'2025 год'}
                />
                <CardMedia
                    component="img"
                    height="300"
                    sx={{ objectPosition: 'top', objectFit: 'contain' }}
                    image={product?.picture_url}
                    alt={product?.name}
                />
                <CardContent>
                    <Typography variant="body2" color="text.secondary">
                        {product?.description}
                    </Typography>
                    <Typography noWrap={true} variant="subtitle1" color="success.main">
                        {`Цена: ${product?.cost} ₽`}
                    </Typography>
                    <Typography noWrap={true} variant="subtitle1" color="text.primary">
                        {`Доступно: ${product?.count} шт.`}
                    </Typography>
                </CardContent>
                <CardActions
                    sx={{ mt: 'auto', display: 'flex', justifyContent: 'space-between' }}
                    disableSpacing
                >
                    <CartButton count={user_count} onClick={handleCart}></CartButton>
                </CardActions>
            </Card>
        </Grid>
    )
})