import {
  Button,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  TextField
} from "@material-ui/core";
import React, { useState } from "react";

import { CertTypeData, CertTypes } from "../../../utils/certificates";
import { Providers } from "../../../utils/roles";
import { getVINOnChangeHandler } from "../../../utils/vinValidation";
import { useUserContext } from "../../Contexts/UserContext";
import useStyles from "../../useStyles";

const getCertTypeLabel = (certtype) => {
  const item = CertTypeData.find((item) => certtype === item.value);
  if (item !== null) return item.inputlabel;
  return "ID";
};

const getCertsTypes = (providers) => {
  let CertsTypes = CertTypeData

  if (providers.length === 0) return [];
  if ((providers[0] === Providers.MAGNA) || (providers[0] === Providers.FISKER_QA)) {
    CertsTypes = CertsTypes.filter((item) => {
      return (item.value === CertTypes.TBOX);
    })
  }
  if (process.env.REACT_APP_SHOW_AFTERSALES_EU_CERT_BUTTON === "0") {
    CertsTypes = CertsTypes.filter((item) => {
      return (item.value !== CertTypes.AftersalesEU);
    })
  }

  return CertsTypes;
}

const CreateForm = ({ onCreate, busy }) => {
  const classes = useStyles();
  const { providers } = useUserContext();
  const [commonName, setCommonName] = useState("");
  const [certType, setCertType] = useState(CertTypes.TBOX);
  const onVINChange = getVINOnChangeHandler(setCommonName);
  const onAftersaleChange = (e) => {
    const value = e.target.value ?? "";
    setCommonName(value);
  }

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

    if (onCreate)
      if (certType === CertTypes.AftersalesEU) {
        onCreate({
          common_name: commonName,
          type: CertTypes.Aftersales,
          is_eu: true,
        });
      } else {
        onCreate({
          common_name: commonName,
          type: certType,
          is_eu: false,
        });
      }
  };

  const onCertTypeChange = (event) => {
    setCertType(event.target.value);
  };

  return (
    <div className={classes.paper}>
      <form className={classes.form} noValidate action="{onSubmit}">
        <TextField
          id="common_name"
          name="common_name"
          label={`Common Name (${getCertTypeLabel(certType)})`}
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "17",
          }}
          required
          fullWidth
          value={commonName}
          onChange={(certType === CertTypes.Aftersales || certType === CertTypes.AftersalesEU) ? onAftersaleChange : onVINChange}
        />
        <FormLabel id="cert-type-group-label">Type</FormLabel>
        <RadioGroup
          row
          aria-labelledby="cert-type-group-label"
          name="cert-type"
          value={certType}
          onChange={onCertTypeChange}
          margin="normal"
        >
          {getCertsTypes(providers).map((item, i) => {
            return (
              <FormControlLabel
                key={i}
                value={item.value}
                label={item.label}
                control={<Radio />}
              />
            );
          })}
        </RadioGroup>
        <Button
          type="submit"
          disabled={busy}
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
          onClick={onSubmit}
        >
          {busy ? "Submitting..." : "Submit"}
        </Button>
      </form>
    </div>
  );
};

export default CreateForm;