import { Typography } from '@mui/material';
import { Box } from '@mui/system';
import { destroyCookie } from 'nookies';
import { useEffect } from 'react';
import { useStore, useStoreUpdate } from '../../store/cart-context';
import CartCard from '../cards/cart-card/CartCard';
import OrderSummaryCard from '../cards/order-summary-card/OrderSummaryCard';
import StepTitle from '../layout/steps-title/StepTitle';

const CartContent = () => {
  const { cartStorage, totalPrice, totalQuantity } = useStore();
  const { removeCartValue, updateItemQuantity } = useStoreUpdate();

  useEffect(() => {
    destroyCookie(null, 'checkout-session', {
      path: '/',
    });
  }, []);

  const mapProductsToDom = () => {
    if (cartStorage?.length) {
      return cartStorage.map((element, i) => (
        <CartCard
          key={i}
          product={element?.product}
          initialQuantity={element?.quantity}
          remove={removeCartValue}
          updateQuantity={updateItemQuantity}
        ></CartCard>
      ));
    } else {
      return (
        <Typography
          sx={{
            mr: { sm: 10, lg: 1 },
            pl: 12,
            mt: 6,
            height: '100%',
            textAlign: 'center',
            fontSize: 45,
          }}
        >
          Your cart is currently empty
        </Typography>
      );
    }
  };

  return (
    <Box sx={{ py: 10, height: '100%', width: '100%' }}>
      <StepTitle title="Items in Your Cart" breadcrumbsArray={['Cart']} />
      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', lg: 'row' },
          mr: { xs: 2, md: 12 },
          ml: { xs: 2, md: 12 },
        }}
      >
        <Box sx={{ mt: 2, mr: { lg: 2, minWidth: '65%' } }}>
          {mapProductsToDom()}
        </Box>

        <Box sx={{ mt: 2 }}>
          <OrderSummaryCard
            data={{ totalPrice: totalPrice, totalQuantity: totalQuantity }}
          ></OrderSummaryCard>
        </Box>
      </Box>
    </Box>
  );
};

export default CartContent;