import { Grid, 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 OrderCard from '../cards/order-card/OrderCard';
import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';

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

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

  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 (
    <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' }}
        >
          Welcome to your user account
        </Typography>
      </Grid>
      <Grid item xs={8} sx={{ mt: 4 }}>
        <Typography sx={{ pl: 12, fontSize: 20 }}>
          Save details for later (user will be logged out)
        </Typography>
      </Grid>
      <Grid item xs={4} sx={{ mt: 4 }}>
        <Typography sx={{ fontSize: 20 }}>Previous Orders</Typography>
      </Grid>
      <Grid item xs={8}>
        <ShippingDetailsForm
          submitHandler={updateUserHandler}
          enableBtn={enableBtn}
        ></ShippingDetailsForm>
      </Grid>
      <Grid item xs={4}>
        <Box sx={{ width: '60%', mt: 2 }}>{mapOrdersToDom()}</Box>
      </Grid>
    </Grid>
  );
};

export default ProfileContent;