import React, { useEffect, useRef, useState } from "react";
import { Redirect } from "react-router";
import { Button, TextField } from "@material-ui/core";

import useStyles from "../../useStyles";
import {
  useVehicleContext,
  VehicleProvider,
} from "../../Contexts/VehicleContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { logger } from "../../../services/monitoring";

const MainForm = () => {
  const { addVehicle, busy } = useVehicleContext();
  const { setMessage, setTitle, setSitePath } = useStatusContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();
  const classes = useStyles();
  const vinEl = useRef(null);
  const modelEl = useRef(null);
  const yearEl = useRef(null);
  const trimEl = useRef(null);
  const [redirect, setRedirect] = useState(null);

  useEffect(() => {
    setTitle("Add Vehicle");
    setSitePath([
      {
        label: "Vehicles",
        link: "/vehicles",
      },
      {
        label: "Add Vehicle",
      },
    ]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onSubmit = async (event) => {
    try {
      event.preventDefault();

      const formData = {
        vin: vinEl.current.value,
        model: modelEl.current.value,
        year: parseInt(yearEl.current.value),
        trim: trimEl.current.value,
      };

      const result = await addVehicle(formData, token);

      setMessage(`Added ${result.vin}`);
      setRedirect(`/vehicles`);
    } catch (e) {
      setMessage(e.message);
      logger.warn(e.stack);
    }
  };

  if (redirect && redirect.length > 0) {
    return <Redirect to={redirect} />;
  }

  return (
    <div className={classes.paper}>
      <form className={classes.form} noValidate action="{onSubmit}">
        <TextField
          id="vin"
          name="vin"
          label="VIN"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "17",
          }}
          required
          fullWidth
          inputRef={vinEl}
        />
        <TextField
          id="model"
          name="model"
          label="Model"
          defaultValue="Ocean"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "255",
          }}
          required
          fullWidth
          inputRef={modelEl}
        />
        <TextField
          id="year"
          name="year"
          label="Year"
          type="number"
          defaultValue="2022"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "4",
            minLength: "4",
          }}
          required
          fullWidth
          inputRef={yearEl}
        />
        <TextField
          id="trim"
          name="trim"
          label="Trim"
          defaultValue="Base"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "4",
            minLength: "4",
          }}
          required
          fullWidth
          inputRef={trimEl}
        />
        <Button
          type="submit"
          disabled={busy}
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
          onClick={onSubmit}
        >
          {busy ? "Submitting..." : "Submit"}
        </Button>
      </form>
    </div>
  );
};

const VehicleAddForm = () => (
  <VehicleProvider>
    <MainForm />
  </VehicleProvider>
);

export default VehicleAddForm;