import React, { useEffect, useRef } from "react";

import useStyles from "../../useStyles";
import {
  useVehicleContext,
  VehicleProvider,
} from "../../Contexts/VehicleContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { Button, TextField } from "@material-ui/core";

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

  useEffect(() => {
    setTitle("Add Vehicle");
    // eslint-disable-next-line
  }, []);
  const onSubmit = async (event) => {
    try {
      event.preventDefault();

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

      const result = await addVehicle(formData, token);

      setMessage(`Added ${result.vin}`);
      vinEl.current.value = "";
    } catch (e) {
      setMessage(e.message);
    }
  };

  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}
        />
        <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;