import React, { useEffect, useState } from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import CloseIcon from "@mui/icons-material/Close";
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import FormStyles from "./Form.Styles";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import useForm from "../../../hooks/useForm";
import { formValidation } from "../_utility";
import SubmitButtonWithLoader from "../../../components/SubmitButtonWithLoader";
import { form_text_builder, API_SUCCESS_MESSAGE } from "../../../constants";
import { getItems } from '../../workorder/list/api';
import { getContacts } from '../../contacts/list/api';
const ItemForm = ({
  item,
  mode,
  open,
  setOpen,
  apiCall,
  setApiStatus,
}) => {
  const [isFormLoading, setIsFormLoading] = useState(false);
  const [workOrders, setWorkOrders] = useState([]);
  const [contacts, setContacts] = useState([]);
  const [isFormSubmit, setIsFormSubmit] = useState(false);
  const classes = FormStyles();
  const { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT } = form_text_builder(mode);
  const { values, errors, handleChangeKV, handleSubmit, setValues } = useForm({
    initialValues: item,
    onSubmit(values) {
      setIsFormLoading(true);
      apiCall(values)
        .then((response) => {
          setApiStatus({
            status: 'success',
            message: API_SUCCESS_MESSAGE,
            show: true,
          });
          handleClose();
        })
        .catch((e) => {
          setApiStatus({
            status: "failed",
            message: e.message,
            show: true,
          });
          handleClose();
        });
    },
    validate: (formValues) => {
      if (isFormSubmit) setIsFormSubmit(false);

      return formValidation(formValues);
    },
  });
  const handleClose = () => {
    setOpen({ open: false });
  };
  const handlelineItemIncrements = () => {

    setValues((values) => ({
      ...values,
      ...{lineitems:[...values.lineitems||[], {descriptions:'', lineitem:0}]},
    }));
  };
  useEffect(() => {
    getItems().then((response) => { handleSuccess(response, setWorkOrders) });
    getContacts().then((response) => { handleSuccess(response, setContacts) });
  }, []);

  function handleSuccess(response, cb) {
    cb(response || []);
  }

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      {values && (
        <Dialog fullWidth maxWidth={"lg"} open={open} onClose={handleClose}>
          <DialogTitle className={classes.header}>
            <Typography className={classes.title}>Quote</Typography>
            <IconButton onClick={handleClose} style={{ marginLeft: "auto" }}>
              <CloseIcon />
            </IconButton>
          </DialogTitle>
          <Box component="form" onSubmit={handleSubmit} noValidate>
            <DialogContent>
              <DialogContentText className={classes.title}>
                {PRIMARY_TEXT}
              </DialogContentText>

              <TextField
                id="projectName"
                label="Project Name"
                variant="outlined"
                style={{ width: '100%' }}
                margin="normal"
                required
                name="projectName"
                value={values.projectName}
                onChange={(event) => {
                  const { value } = event.target;
                  handleChangeKV("projectName", value);
                }}
                error={!!errors.projectName}
                helperText={errors.projectName}
              />
              <div>
                <InputLabel id="Wo-select-date-label">Date*</InputLabel>
                <TextField
                  id="date"
                  label=""
                  variant="outlined"
                  style={{ width: '100%' }}
                  margin="normal"
                  required
                  name="date"
                  type="date"
                  value={values.date}
                  onChange={(event) => {
                    const { value } = event.target;
                    handleChangeKV("date", value);
                  }}
                  error={!!errors.LastName}
                  helperText={errors.LastName}
                />
              </div>
              <div>
                <InputLabel id="Wo-select-contact-label">POC*</InputLabel>
                <Select
                  labelId="Wo-select-contact-label"
                  id="wo"
                  fullWidth
                  value={values.contactId}
                  label=""
                  onChange={(event) => {
                    const { value } = event.target;
                    handleChangeKV("contactId", value);
                  }}
                >
                  {contacts.map((s, i) => (
                    <MenuItem value={s.id} key={i}>
                      {s.name}
                    </MenuItem>
                  ))}
                </Select>
              </div>
              <div>
                <InputLabel id="Wo-select-label">Personal For*</InputLabel>
                <Select
                  labelId="Wo-select-label"
                  id="wo"
                  fullWidth
                  value={values.workorderId}
                  label="Personal For*"
                  onChange={(event) => {
                    const { value } = event.target;
                    const wo = workOrders.find(x => x.id = value)
                    setValues((old) => ({
                      ...old,
                      po:wo.po,
                      tt:wo.tt,
                      siteId:wo?.locationId?.toString(),
                      siteName: wo.locationName,
                      workorderId:value
                    }));
                  }}
                >
                  {workOrders.map((s, i) => (
                    <MenuItem value={s.id} key={i}>
                      {s.workerOrderTitle}
                    </MenuItem>
                  ))}
                </Select>
              </div>
              <div>
                <InputLabel id="PO-label">PO # :</InputLabel>
                <TextField
                  id="po"
                  label=""
                  variant="outlined"
                  style={{ width: '100%' }}
                  margin="normal"
                  required
                  name="po"
                  value={values?.po}
                  onChange={(event) => {
                    const { value } = event.target;
                    handleChangeKV("po", value);
                  }}
                  error={!!errors.po}
                  helperText={errors.po}
                />
              </div>
              <div>
                <InputLabel id="TT-label">TT #</InputLabel>
                <TextField
                  id="tt"
                  label=""
                  variant="outlined"
                  style={{ width: '100%' }}
                  margin="normal"
                  required
                  name="tt"
                  value={values?.tt}
                  onChange={(event) => {
                    const { value } = event.target;
                    handleChangeKV("tt", value);
                  }}
                  error={!!errors.tt}
                  helperText={errors.tt}
                />
              </div>
              <div>
                <InputLabel id="siteName-label">Site Name</InputLabel>
                <TextField
                  id="siteName"
                  label=""
                  variant="outlined"
                  style={{ width: '100%' }}
                  margin="normal"
                  required
                  name="siteName"
                  value={values?.siteName}
                  onChange={(event) => {
                    const { value } = event.target;
                    handleChangeKV("siteName", value);
                  }}
                  error={!!errors.siteName}
                  helperText={errors.siteName}
                />
              </div>
              <div>
                <InputLabel id="siteId-label">Site Id</InputLabel>
                <TextField
                  id="siteId"
                  label=""
                  variant="outlined"
                  style={{ width: '100%' }}
                  margin="normal"
                  required
                  name="siteId"
                  value={values?.siteId}
                  onChange={(event) => {
                    const { value } = event.target;
                    handleChangeKV("siteId", value);
                  }}
                  error={!!errors.siteId}
                  helperText={errors.siteId}
                />
              </div>
              <div style={{marginTop:'10px'}}>
                <Typography className={classes.title}>List Items</Typography>
                <IconButton onClick={handlelineItemIncrements} style={{ marginLeft: "auto" }}>
                  <AddCircleOutlineIcon />
                </IconButton>
                {values?.lineitems?.map((li,i) => {
                  return (
                  <div className="listItem" key={'listItem'+i} style={{display:'flex'}}>
                    <div className="description" key={'descriptionWrapper'+i} style={{width:"60%", paddingRight:'2px'}}>                 
                      <InputLabel id="description-label">Description</InputLabel>
                      <TextField
                        id={'description'+i}
                        key={'description'+i}
                        label=""
                        variant="outlined"
                        style={{ width: '100%' }}
                        margin="normal"
                        required
                        name="description"
                        value={li?.descriptions}
                        onChange={(event) => {
                          const { value } = event.target;
                          li.descriptions = value;
                          setValues((oldValues) => ({
                            ...oldValues,
                            ...values,                           
                          }));
                        }}
                        error={!!errors.descriptions}
                        helperText={errors.descriptions}
                      />
                    </div>
                    <div className="lineitem" key={'lineitemWrapper'+i}  style={{width:"40%"}}>                 
                      <InputLabel id="lineitem-label">Amount</InputLabel>
                      <TextField
                        id={'lineitem'+i}
                        key={'lineitem'+i}
                        label=""
                        variant="outlined"
                        style={{ width: '100%' }}
                        margin="normal"
                        required
                        name="lineitem"
                        value={li?.lineitem}
                        onChange={(event) => {
                          const { value } = event.target;
                          li.lineitem = value;
                          setValues((oldValues) => ({
                            ...oldValues,
                            ...values,                           
                          }));
                        }}
                        error={!!errors.lineitem}
                        helperText={errors.lineitem}
                      />
                    </div>
                  </div>)
                })}
                
              </div>
            </DialogContent>
            <DialogActions>
              <Button onClick={handleClose}>Cancel</Button>
              <SubmitButtonWithLoader
                buttonText={BUTTON_TEXT}
                loading={isFormLoading}
              />
            </DialogActions>
          </Box>
        </Dialog>
      )}
    </div>
  );
};

export default ItemForm;