// ** MUI Imports
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import CardContent from '@mui/material/CardContent';

// ** Icons Imports
import { Stack } from '@mui/material';
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import { useRouter } from 'next/router';
import { useContext, useEffect, useState } from 'react';
import { CartContext } from 'src/contexts/cart';
import fetchProduct from 'src/api/fetchProduct';
import Loading from 'src/components/Loading';

const CardProductDetail = () => {
  const router = useRouter();
  const { pid } = router.query;
  const [product, setProduct] = useState(null);

  const { addToCart } = useContext(CartContext);

  useEffect(() => {
    const update = async () => {
      let response = await fetchProduct({ pid });
      let { data } = response;
      let { product } = data;
      setProduct(product);
    };
    if (pid) update();
  }, [pid]);

  if (!product)
    return (
      <>
        <Loading />
      </>
    );

  // help avoid pre-rendering
  if (typeof window === 'undefined') return null;

  return (
    <Card>
      <Grid container spacing={6}>
        <Grid
          item
          sm={5}
          xs={12}
          sx={{ paddingTop: ['0 !important', '1.5rem !important'], paddingLeft: ['1.5rem !important', '0 !important'] }}
        >
          <CardContent
            sx={{
              height: '100%',
              display: 'flex',
              textAlign: 'center',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: 'action.hover',
              padding: theme => `${theme.spacing(18, 5, 16)} !important`,
            }}
          >
            <Stack direction="column" justifyContent={'center'} alignItems={'center'} spacing={'3rem'}>
              <Box
                style={{
                  backgroundImage: `url('/api/files/get?dir_prefix=${product.product_image}')`,
                  backgroundSize: 'contain',
                  backgroundPosition: 'center',
                  backgroundRepeat: 'no-repeat',
                  width: '300px',
                  minHeight: '300px',
                  borderRadius: '10px',
                }}
              ></Box>
              <Box sx={{ mb: 3.5, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                <Typography variant="h6">HKD $</Typography>
                <Typography variant="h6" sx={{ lineHeight: 1, fontWeight: 600, fontSize: '3.75rem !important' }}>
                  {parseInt(product.price).toFixed(2)}
                </Typography>
              </Box>
              <Typography variant="body2" sx={{ mb: 13.75, display: 'flex', flexDirection: 'column' }}></Typography>
            </Stack>
          </CardContent>
        </Grid>
        <Grid item xs={12} sm={7}>
          <CardContent sx={{ padding: theme => `${theme.spacing(3.25, 5.75, 6.25)} !important` }}>
            <Typography variant="h6" sx={{ marginBottom: 3.5 }}>
              {product.name}
            </Typography>
            <Typography variant="body2">{product.description}</Typography>
            <Divider sx={{ marginTop: 6.5, marginBottom: 6.75 }} />
            <Stack direction="row" justifyContent={'flex-end'}>
              <Button
                disabled={product.unsold_count < 1}
                variant="contained"
                onClick={() => addToCart(pid, 1, parseInt(product.price))}
              >
                <AddShoppingCartIcon />
                {product.unsold_count < 1 ? 'sold out' : 'Add to cart'}
              </Button>
            </Stack>
          </CardContent>
        </Grid>
      </Grid>
    </Card>
  );
};

export default CardProductDetail;
