import ModalWrapper from '../wrappers/ModalWrapper'
import { Box, Button } from '@material-ui/core';
import CustomDatePickerNew from '../ui/CustomDatePickerNew';
import CustomTimePicker from '../ui/CustomTimePicker';
import { Form, Formik } from 'formik';
import { WebStorage } from '../../Utilities/WebStorage';
import { TOKEN_STORAGE_KEY } from '../../Types/Constants';
import { toast } from 'react-toastify';
import { validationScheduleDeliverySchema } from '../lib/validationSchema';
import { useSelector } from 'react-redux';
import { AppState } from '../../Redux';
interface ScheduleDeliveryModalProps {
  open: boolean;
  close: () => void;
  assignedData?: any;
  fetchJobs: () => void
}

const storage = new WebStorage();

const ScheduleDeliveryModal = ({ open, close, assignedData, fetchJobs }: ScheduleDeliveryModalProps) => {
  const user = useSelector((state: AppState) => state.user.response);

  const initialValues = {
    actual_delivery_date: assignedData?.actual_delivery_date||"",
    actual_delivery_time: assignedData?.actual_delivery_time||"",
    id:assignedData?.id||""
  }

  const handleSubmit = async (values: any, { setSubmitting }: any) => {
    const myHeaders = new Headers();
    myHeaders.append("Authorization", `Bearer ${storage.retrieve(TOKEN_STORAGE_KEY)}`);

    const deliveryDate = new Date(values.actual_delivery_date);

    if (!assignedData?.actual_delivery_date) {
      deliveryDate?.setDate(deliveryDate?.getDate() + 1);
    }
    
    const updatedDeliveryDate = deliveryDate?.toISOString();

    const jobData: any = {
      actual_delivery_date: updatedDeliveryDate,
      actual_delivery_time: values.actual_delivery_time,
    };

    const requestBody: any = {
      jobData,
    };

    const formData = new FormData();
    formData.append('jobData', JSON.stringify(requestBody.jobData));
    formData.append('jobId', values?.id)

    const requestOptions: RequestInit = {
      method: "POST",
      headers: myHeaders,
      body: formData,
      redirect: "follow"
    };

    try {
      const response = await fetch(process.env.REACT_APP_NEW_BASE_URL + "/v3/createNewJob2", requestOptions);

      const result = await response.json();
      if (result.status_code === 201 && result.success === true) {
        toast.success(result.message);
        fetchJobs()
        handleClose()
      }
      else if (result.status_code === 400 && result.success === false) {
        toast.error(result.message);
      }
    } catch (error) {
      toast.error(error.message);
    } finally {
      setSubmitting(false);
    }
  };
  const handleClose = () => {
    close();
  };

  return (
    <>
      <ModalWrapper
        open={open}
        onClose={handleClose}
        heading="Delivery information"
        width='650px'
        overflowY="visible"
      >
        <Formik
          initialValues={initialValues}
          onSubmit={handleSubmit}
          enableReinitialize={true}
          validationSchema={validationScheduleDeliverySchema}
        >
          {({ handleChange, values, setFieldValue,isSubmitting,errors,touched }) => (
            <Form>

              <Box mb={6}>
                <CustomDatePickerNew
                  selectedDate={values.actual_delivery_date}
                  handleDateChange={(date: string) => {
                    setFieldValue(`actual_delivery_date`, date);
                  }}
                  placeholder="Actual Delivery Date"
                  name={`actual_delivery_date`}
                  error={errors.actual_delivery_date && touched.actual_delivery_date ? errors.actual_delivery_date : null}
                  minDate={user.type==="SUPER_ADMIN"||user.type==="ADMIN_OPERATIONS"?null:new Date()}
                />
              </Box>

              <Box mb={2}>
                <CustomTimePicker
                  label="Actual Delivery Time"
                  value={values.actual_delivery_time}
                  onChange={handleChange}
                  readOnly={false}
                  name={`actual_delivery_time`}
                  error={errors.actual_delivery_time && touched.actual_delivery_time ? errors.actual_delivery_time : null}

                />
              </Box>

              <Button
                type="submit"
                fullWidth
                color="secondary"
                variant="contained"
                style={{ margin: '20px 0' }}
                disabled={isSubmitting}
              >
                {isSubmitting ? "Saving..." : "Save"}
              </Button>
            </Form>
          )}

        </Formik>
      </ModalWrapper>

    </>
  )
}

export default ScheduleDeliveryModal