import React, { 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, Typography } from "@material-ui/core";

const MainForm = () => {
  const { addVehicle, busy } = useVehicleContext();
  const { setMessage } = useStatusContext();
  const { token } = useUserContext();
  const classes = useStyles();
  const vinEl = useRef(null);

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

      const {
        idToken: { jwtToken: authToken },
      } = token;
      const formData = {
        vin: vinEl.current.value,
      };

      const result = await addVehicle(formData, authToken);

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

  return (
    <div className={classes.paper}>
      <Typography component="h1" variant="h5">
        Add Vehicle
      </Typography>
      <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}
        />
        <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;