import { FC } from 'react';

import Inventory2OutlinedIcon from '@material-hu/icons/material/Inventory2Outlined';
import MonetizationOnOutlinedIcon from '@material-hu/icons/material/MonetizationOnOutlined';
import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import CardMedia from '@material-hu/mui/CardMedia';
import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

import defaultProduct from 'src/assets/images/default_product.webp';
import { ProductObject } from 'src/types/recognitions';

export type ProductCardProps = {
  product: ProductObject;
};

export const ProductCard: FC<ProductCardProps> = props => {
  const { product } = props;

  return (
    <Card
      sx={{
        display: 'flex',
        flexDirection: 'column',
        width: 250,
        m: 1,
        ':hover': {
          boxShadow: '0 7px 11px 0 rgba(0,0,0,.1), 0 2px 4px 0 rgba(0,0,0,.1)',
        },
      }}
    >
      <CardMedia
        component="img"
        sx={{
          height: 240,
          objectFit: 'contain',
        }}
        image={
          product.image
            ? `data:image/png;base64,${product.image}`
            : defaultProduct
        }
        title={product.name}
      />
      <Divider sx={{ mt: 0.5 }} />
      <CardContent
        sx={{
          display: 'flex',
          flex: '1 1 auto',
          flexDirection: 'column',
          justifyContent: 'space-between',
        }}
      >
        <Box
          sx={{
            '& p': {
              fontSize: 20,
            },
          }}
        >
          <Typography
            gutterBottom
            variant="h5"
            component="p"
            sx={{ mb: 1 }}
          >
            {product.name}
          </Typography>
        </Box>
        <Box>
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
            <MonetizationOnOutlinedIcon
              sx={{ mr: 0.5 }}
              fontSize="small"
            />
            <Typography sx={{ fontSize: '14px' }}>
              {product.priceSones}
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
            <Inventory2OutlinedIcon
              fontSize="small"
              sx={{ mr: 0.5 }}
            />
            <Typography sx={{ fontSize: '14px' }}>
              {product.quantity}
            </Typography>
          </Box>
          <Typography
            variant="body2"
            color="text.secondary"
          >
            {product.description}
          </Typography>
        </Box>
      </CardContent>
    </Card>
  );
};

export default ProductCard;