import { Alert, Snackbar, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useSession } from 'next-auth/react';
import { useState } from 'react';
import { updateUser } from '../../requests/user/userUpdateRequest';
import { useUserUpdate } from '../../store/user-context';
import CardContainer from '../cards/card-container/CardContainer';
import OrderCard from '../cards/order-card/OrderCard';
import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';
import ContentContainer from '../layout/content-wrapper/ContentContainer';
import PageWrapper from '../layout/page-wrapper/PageWrapper';
import StepTitle from '../layout/steps-title/StepTitle';

const ProfileContent = ({ orders }) => {
  const { data: session } = useSession();
  const { updateUserInfo } = useUserUpdate();
  const [enableBtn, setEnableBtn] = useState(true);
  const [open, setOpen] = useState(false);

  const updateUserHandler = async (values) => {
    try {
      setEnableBtn(false);
      updateUserInfo(values);
      await updateUser(values, session.user._id);
      setOpen(true);
      setTimeout(() => {
        setEnableBtn(true);
      }, 5000);
    } catch (error) {
      console.log(error);
      setTimeout(() => {
        setEnableBtn(true);
      }, 3000);
    }
  };

  const handleCloseNotification = () => {
    setOpen(false);
  };

  const mapOrdersToDom = () =>
    orders.slice(-4).map((order, i) => (
      <OrderCard
        key={i}
        data={{
          date: order.time.split('T')[0],
          name: order.shippingAddress.fullName,
          totalPrice: order.totalPrice,
        }}
      ></OrderCard>
    ));

  return (
    <PageWrapper>
      <StepTitle title="Welcome to your user account" />
      <Snackbar
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
        open={open}
        autoHideDuration={3000}
        onClose={handleCloseNotification}
      >
        <Alert
          onClose={handleCloseNotification}
          severity="success"
          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
        >
          User profile updated!
        </Alert>
      </Snackbar>

      <ContentContainer>
        <Box flexGrow={1} sx={{ minWidth: '65%' }}>
          <Typography sx={{ fontSize: 20, mb: 3 }}>
            Save details for later
          </Typography>
          <ShippingDetailsForm
            submitHandler={updateUserHandler}
            enableBtn={enableBtn}
          ></ShippingDetailsForm>
        </Box>
        <Box sx={{ mt: { xs: 5, md: 0 } }}>
          <Typography
            sx={{ fontSize: 20, mb: { xs: -2, md: 3 }, ml: { md: 3 } }}
          >
            Previous Orders
          </Typography>
          <CardContainer>{mapOrdersToDom()}</CardContainer>
        </Box>
      </ContentContainer>
    </PageWrapper>
  );
};

export default ProfileContent;