import { Checkbox, FormControlLabel, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useRouter } from 'next/router';
import { setCookie } from 'nookies';
import { useState } from 'react';
import {
  useCheckoutData,
  useCheckoutDataUpdate,
} from '../../store/checkout-context';
import { stripe } from '../../utils/helpers/stripe';
//import DataCardS from '../cards/data-card-shipping/DataCardS';
import DataCard from '../cards/data-card/DataCard';
import StepTitle from '../layout/steps-title/StepTitle';
import ButtonGroup from './shipping-btnGroup/ButtonGroup';
import ShippingData from './shipping-data/ShippingData';
import ShippingModal from './shipping-modal/ShippingModal';

const ShippingContent = () => {
  const { checkoutStorage } = useCheckoutData();
  const { changeContact, changeShippingData } = useCheckoutDataUpdate();
  const [open, setOpen] = useState({ isOpen: false, type: '' });

  const router = useRouter();

  const handleOpen = (type) => setOpen({ isOpen: true, type });
  const handleClose = () => setOpen({ isOpen: false, type: '' });

  const handleChangeShipping = (values) => {
    changeShippingData(values);
    handleClose();
  };

  const handleChangeContact = (values) => {
    changeContact(values);
    handleClose();
  };

  const handleStripePayment = () => {
    stripe({
      lineItems: [
        {
          price: 'price_1Lg4MsDY7dvAcw2f1CGQaFFR',
          quantity: 1,
        },
      ],
    });
    setCookie(null, 'review-session', 'active', {
      maxAge: 3600,
      expires: new Date(Date.now() + 3600),
      path: '/',
    });
  };

  const handleBackToCart = () => {
    router.replace('/cart');
  };

  const mapProductsToDom = () => {
    return checkoutStorage?.products?.map((entry, i) => (
      <DataCard
        key={i}
        data={entry.product}
        quantity={entry.quantity}
      ></DataCard>
    ));
  };

  return (
    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <StepTitle
        title="Shipping"
        breadcrumbsArray={['Cart', 'Checkout', 'Shipping']}
      />
      <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={12} lg={8}>
        <ShippingData
          email={checkoutStorage?.userInfo?.email}
          address={checkoutStorage?.userInfo?.address}
          city={checkoutStorage?.userInfo?.city}
          postcode={checkoutStorage?.userInfo?.postcode}
          handleOpen={handleOpen}
        />
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            backgroundColor: '#f2f2f2',
            alignItems: 'center',
            ml: 12,
            mb: 2,
            width: '30%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <FormControlLabel
            control={<Checkbox checked disabled />}
            label="Free Shipping"
            sx={{ color: 'black', ml: 2 }}
          />
        </Box>
        <ButtonGroup
          handleStripePayment={handleStripePayment}
          handleBackToCart={handleBackToCart}
        />
      </Grid>
      <Grid item xs={12} lg={4}>
        <Box
          sx={{
            width: '80%',
            mt: 2,
            height: '100%',
            ml: { xs: 12, lg: 0 },
            display: { lg: 'block', xs: 'flex' },
            flexWrap: { xs: 'wrap', lg: 'none' },
            justifyContent: { xs: 'center', lg: 'none' },
          }}
        >
          {mapProductsToDom()}
        </Box>
      </Grid>
      <ShippingModal
        open={open}
        handleClose={handleClose}
        handleChangeShipping={handleChangeShipping}
        handleChangeContact={handleChangeContact}
      />
    </Grid>
  );
};

export default ShippingContent;