import { Button, TextField } from "@material-ui/core";
import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import { useStatusContext } from "../../Contexts/StatusContext";
import { SupplierProvider } from "../../Contexts/SupplierContext";
import {
  SupplierDetailsProvider,
  useSupplierDetailsContext,
} from "../../Contexts/SupplierDetailsContext";
import { useUserContext } from "../../Contexts/UserContext";
import useStyles from "../../useStyles";

const Main = () => {
  const { email } = useParams();
  const classes = useStyles();
  const {
    busy,
    id,
    contact,
    company,
    address,
    phone,
    program,
    ecus,
    getSupplier,
    setID,
    setContact,
    setCompany,
    setAddress,
    setPhone,
    setProgram,
    setECUs,
    updateSupplier,
  } = useSupplierDetailsContext();
  const { setTitle, setSitePath, setMessage } = useStatusContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();

  const approve = async (event) => {
    event.preventDefault();
    try {
      await updateSupplier(email, token);
      setMessage(`Updated ${email}`);
    } catch (e) {
      console.log(e);
      setMessage(e.message);
    }
  };

  useEffect(() => {
    setTitle(`Supplier ${email}`);
    setSitePath([
      {
        label: `Suppliers`,
        link: "/suppliers",
      },
      {
        label: email,
      },
    ]);

    (async () => {
      try {
        await getSupplier(email, token);
      } catch (e) {
        setMessage(e.message);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={classes.paper}>
      <form className={classes.form} noValidate action="#">
        <TextField
          id="id"
          name="id"
          label="Active Directory ID"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "255",
          }}
          required
          fullWidth
          value={id}
          onChange={(e) => setID(e.target.value)}
        />
        <TextField
          id="contact"
          name="contact"
          label="Contact"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "255",
          }}
          required
          fullWidth
          value={contact}
          onChange={(e) => setContact(e.target.value)}
        />
        <TextField
          id="company"
          name="company"
          label="Company"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "255",
          }}
          required
          fullWidth
          value={company}
          onChange={(e) => setCompany(e.target.value)}
        />
        <TextField
          id="address"
          name="address"
          label="Address"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "1200",
          }}
          required
          fullWidth
          value={address}
          onChange={(e) => setAddress(e.target.value)}
        />
        <TextField
          id="telephone"
          name="telephone"
          label="Telephone"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "50",
          }}
          required
          fullWidth
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
        />
        <TextField
          id="program"
          name="program"
          label="Program"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "50",
          }}
          required
          fullWidth
          value={program}
          onChange={(e) => setProgram(e.target.value)}
        />
        <TextField
          id="ecus"
          name="ecus"
          label="ECUs"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "1000",
          }}
          required
          fullWidth
          value={ecus}
          onChange={(e) => setECUs(e.target.value)}
        />
        <Button
          type="submit"
          disabled={busy}
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
          onClick={approve}
        >
          {busy ? "Submitting..." : "Submit"}
        </Button>
      </form>
    </div>
  );
};

const SupplierDetails = () => (
  <SupplierProvider>
    <SupplierDetailsProvider>
      <Main />
    </SupplierDetailsProvider>
  </SupplierProvider>
);

export default SupplierDetails;