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

import { CertTypeData, CertTypes } from "../../../utils/certificates";
import useStyles from "../../useStyles";

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

const CreateForm = ({ onCreate, busy }) => {
  const classes = useStyles();
  const commonnameEl = useRef(null);
  const [certType, setCertType] = useState(CertTypes.TBOX);

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

    if (onCreate)
      onCreate({
        common_name: commonnameEl.current.value,
        type: certType,
      });
  };

  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
          inputRef={commonnameEl}
        />
        <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"
        >
          {CertTypeData.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;