import {
  Button,
  TextField
} from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { Redirect } from "react-router";
import { logger } from "../../../services/monitoring";
import { useStatusContext } from "../../Contexts/StatusContext";
import {
  CarUpdatesProvider,
  useCarUpdatesContext
} from "../../Contexts/CarUpdatesContext";
import { useUserContext } from "../../Contexts/UserContext";
import useStyles from "../../useStyles";

const MainForm = () => {
  const { addSUMSVersion, busy } = useCarUpdatesContext();
  const {
    token: {
      idToken: { jwtToken: token },
    },
  } = useUserContext();
  const classes = useStyles();
  const [redirect, setRedirect] = useState(null);
  const { setMessage, setTitle, setSitePath } = useStatusContext();
  const [sumsVersion, setSumsVersion] = useState("");
  const [osVersion, setOsVersion] = useState("");

  useEffect(() => {
    setTitle(`New SUMS Version`);
    setSitePath([
      {
        label: "Tools",
        link: "/tools/sumsversions",
      },
      {
        label: "SUMS Versions",
        link: "/tools/sumsversions",
      },
      {
        label: `New SUMS Version`,
      },
    ]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onSUMSVersionChange = (event) => {
    setSumsVersion(event.target.value);
  }

  const onOSVersionChange = (event) => {
    setOsVersion(event.target.value);
  }

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

      const result = await addSUMSVersion(sumsVersion, osVersion, token);
      if (!result || result.error) return;

      setMessage(`Added ${sumsVersion}`);
      setRedirect(`/tools/sumsversions`);
    } 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="sums_version"
          name="sums_version"
          label="SUMS Version"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "15",
          }}
          required
          fullWidth
          value={sumsVersion}
          onChange={onSUMSVersionChange}
          type="text"
        />
        <TextField
          id="os_version"
          name="os_version"
          label="OS Version"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "20",
          }}
          required
          fullWidth
          value={osVersion}
          onChange={onOSVersionChange}
          type="text"
        />
        <Button
          type="submit"
          disabled={busy}
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
          onClick={onSubmit}
        >
          {busy ? "Submitting..." : "Submit"}
        </Button>
      </form>
    </div>
  );
};

const SumsNew = () => (
  <CarUpdatesProvider>
    <MainForm />
  </CarUpdatesProvider>
);

export default SumsNew;