import React from "react";
import {
  Button,
  Checkbox,
  Dialog,
  DialogTitle,
  DialogContentText,
  DialogActions,
  DialogContent,
  FormGroup,
  FormControlLabel,
} from '@material-ui/core';
import TextInputList from "../Controls/TextInputList";

const TransformModal = ({
  open,
  close,
  title,
  body,
  data,
  setData,
  submit
}) => {
  const handleClick = () => {
    close();
    submit();
  };

  const handleChange = (key, value) => {
    setData((data) => {
      const {[key]: toChange, ...rest} = data;
      switch (data[key].type) {
        case "boolean":
          toChange.value = !toChange.value;
          break;
        case "list.string":
          toChange.value = value;
          break;
        default:
      }
      return {
        [key]: toChange,
        ...rest
      };
    });
  };

  return (
    <Dialog
      open={open}
      onClose={close}
    >
      <DialogTitle id="alert-dialog-title">
        {title}
      </DialogTitle>
      <DialogContent>
        {body && <DialogContentText>
          {body}
        </DialogContentText>}
        <FormGroup>
          {Object.entries(data).map((([key, value]) => {
            switch (value.type) {
              case "boolean":
                return (
                  <FormControlLabel
                    key={key}
                    label={value.label}
                    control={
                      <Checkbox
                        checked={data[key].value}
                        onChange={() => handleChange(key)}
                      />
                    }
                  />
                )
              case "list.string":
                return (
                  <TextInputList
                    key={key}
                    label={value.label}
                    onChange={(list) => handleChange(key, list)}
                  />
                )
              default:
                return <></>;
            }
          }))}
        </FormGroup>
      </DialogContent>
      <DialogActions>
        <Button
          label="Test"
          onClick={close}
        >
          Cancel
        </Button>
        <Button
          variant="contained"
          color="secondary"
          onClick={handleClick}
          autoFocus
        >
          Submit
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default TransformModal;