// ** React Imports
import { useContext } from 'react';

// ** MUI Imports
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Grid from '@mui/material/Grid';

// ** Icons Imports
import CartPlus from 'mdi-material-ui/CartPlus';
import { useRouter } from 'next/router';
import { Stack } from '@mui/material';
import { CartContext } from 'src/contexts/cart';
import TextSnippetIcon from '@mui/icons-material/TextSnippet';

// Styled Grid component
const StyledGrid = styled(Grid)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  [theme.breakpoints.down('md')]: {
    borderBottom: `1px solid ${theme.palette.divider}`,
  },
  [theme.breakpoints.up('md')]: {
    borderRight: `1px solid ${theme.palette.divider}`,
  },
}));

const CardProduct = ({ product, i }) => {
  let router = useRouter();
  const { addToCart } = useContext(CartContext);

  if (typeof window === 'undefined') return null;

  return (
    <Card>
      <Grid container spacing={6}>
        <StyledGrid item md={5} xs={12}>
          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div
              style={{
                width: '100%',
                height: '100%',
                minWidth: '100px',
                minHeight: '100px',
                backgroundImage: `url('/api/files/get?dir_prefix=${product.product_image}')`,
                backgroundSize: 'contain',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
              }}
            />
          </CardContent>
        </StyledGrid>
        <Grid
          item
          xs={12}
          md={7}
          sx={{
            paddingTop: ['0 !important', '0 !important', '1.5rem !important'],
            paddingLeft: ['1.5rem !important', '1.5rem !important', '0 !important'],
          }}
        >
          <CardContent>
            <Stack direction="column">
              <Typography variant="caption" sx={{ marginBottom: 2 }}>
                {product.name}
              </Typography>

              <Typography variant="caption" sx={{ fontWeight: 500, marginBottom: 3 }}>
                Price:{' '}
                <Box component="span" sx={{ fontWeight: 'bold' }}>
                  ${parseInt(product.price).toFixed(2)}
                </Box>
              </Typography>

              <Typography variant="caption" sx={{ fontWeight: 500, marginBottom: 3 }}>
                Remains:{' '}
                <Box component="span" sx={{ fontWeight: 'bold' }}>
                  {product.count}
                </Box>
              </Typography>
            </Stack>
          </CardContent>
          <CardActions className="card-action-dense">
            <Stack direction="row" spacing={'1rem'} justifyContent={'flex-end'} sx={{ width: '100%' }}>
              <Box>
                <Button
                  size="small"
                  variant="contained"
                  disabled={product.unsold_count < 1}
                  onClick={() => {
                    addToCart(product.pid, 1, parseInt(product.price));
                  }}
                  startIcon={<CartPlus />}
                >
                  {product.unsold_count < 1 ? 'sold out' : 'Add'}
                </Button>
              </Box>
              <Box>
                <Button
                  size="small"
                  variant="contained"
                  onClick={() => {
                    router.push(`/shopfront/product/${product.pid}`);
                  }}
                  startIcon={<TextSnippetIcon />}
                >
                  Details
                </Button>
              </Box>
            </Stack>
          </CardActions>
        </Grid>
      </Grid>
    </Card>
  );
};

export default CardProduct;
