import { Breadcrumbs, Divider, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useStore } from '../../store/cart-context';
import { useCheckoutDataUpdate } from '../../store/checkout-context';
import DataCard from '../cards/data-card/DataCard';
import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';

const CheckoutContent = () => {
  const { cartStorage } = useStore();
  const { addCheckoutValue } = useCheckoutDataUpdate();
  const { data: session } = useSession();
  const router = useRouter();

  const submitHandler = (formValues) => {
    addCheckoutValue(
      cartStorage,
      { ...formValues, email: session.user.email },
      session.user._id
    );
    router.push('/shipping');
  };

  return (
    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <Grid item xs={12}>
        <Typography
          variant="h3"
          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
        >
          Checkout
        </Typography>
      </Grid>
      <Grid item xs={12}>
        <Divider sx={{ backgroundColor: 'primary.main', mx: 12 }} />
      </Grid>
      <Grid item xs={12} sx={{ mt: 4 }}>
        <Breadcrumbs
          aria-label="breadcrumb"
          separator="›"
          sx={{ pl: 12, fontSize: 20 }}
        >
          <Typography>Cart</Typography>
          <Typography color="red">Checkout</Typography>
        </Breadcrumbs>
      </Grid>
      <Grid item xs={12} sx={{ mt: 1 }}>
        <Typography sx={{ pl: 12, fontSize: 20 }}>
          The following fields will be used as the shipping details for your
          order
        </Typography>
      </Grid>
      <Grid item xs={8}>
        <ShippingDetailsForm
          backBtn={true}
          isCheckout={true}
          submitHandler={submitHandler}
        ></ShippingDetailsForm>
      </Grid>
      <Grid item xs={4}>
        <Box sx={{ width: '80%', mt: 2 }}>
          {cartStorage?.map((entry, i) => {
            return (
              <DataCard
                key={i}
                data={entry.product}
                quantity={entry.quantity}
              ></DataCard>
            );
          })}
        </Box>
      </Grid>
    </Grid>
  );
};

export default CheckoutContent;