import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Snackbar from '@mui/material/Snackbar';
import CloseIcon from '@mui/icons-material/Close';

import type { CartNotice } from './cartTypes';
import { CartToast, CartToastContent, CartToastName } from './styles';
import { storeImageSrc } from '@/lib/storeImage';

type CartAddedSnackbarProps = {
	notice: CartNotice | null;
	onClose: () => void;
	onOpenCart: () => void;
};

function CartAddedSnackbar({ notice, onClose, onOpenCart }: CartAddedSnackbarProps) {
	return (
		<Snackbar
			open={Boolean(notice)}
			anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
			autoHideDuration={3200}
			onClose={onClose}
		>
			{notice ? (
				<CartToast
					severity="success"
					variant="filled"
					icon={false}
					action={
						<>
							<Button
								color="inherit"
								size="small"
								onClick={onOpenCart}
							>
								Ver carrito
							</Button>
							<IconButton
								size="small"
								aria-label="Cerrar alerta"
								color="inherit"
								onClick={onClose}
							>
								<CloseIcon fontSize="small" />
							</IconButton>
						</>
					}
				>
					<CartToastContent>
						<img
							src={storeImageSrc(notice.product.image, notice.product.name)}
							alt={notice.product.name}
						/>
						<span>
							<strong>Producto agregado al carrito</strong>
							<CartToastName>
								{notice.quantity} x {notice.product.name}
							</CartToastName>
						</span>
					</CartToastContent>
				</CartToast>
			) : undefined}
		</Snackbar>
	);
}

export default CartAddedSnackbar;