import { useState } from "react";
import Box from "@mui/material/Box";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";

const backupIntervalStepDisplay = ["Minutes", "Hours", "Days"];
export const backupIntervalDefault = "1d";
export const backupIntervalStepOptions = ["m", "h", "d"];
export default function BackupIntervalOption(props) {
  const { onChange } = props;
  const [interval, setInterval] = useState(1);
  const [intervalStep, setIntervalStep] = useState(
    backupIntervalStepOptions[2],
  );

  const changeStep = (e) => {
    setIntervalStep(e.target.value);
    onChange({ target: { value: `${interval}${e.target.value}` } });
  };

  const changeInterval = (e) => {
    setInterval(e.target.value);
    onChange({ target: { value: `${e.target.value}${intervalStep}` } });
  };

  return (
    <Box>
      <TextField
        label="Backup Interval"
        sx={{ width: "70%" }}
        value={interval}
        onChange={changeInterval}
        helperText="Examples: 1m, 3h, 3.5d"
        FormHelperTextProps={{ sx: { ml: 0 } }}
        type="number"
        required
      />
      <TextField
        label="Step"
        sx={{ width: "30%", minWidth: "4rem" }}
        onChange={onChange}
        value={intervalStep}
        select
        required
        SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
      >
        {backupIntervalStepOptions.map((o, i) => (
          <MenuItem value={o} key={i}>
            {backupIntervalStepDisplay[i]}
          </MenuItem>
        ))}
      </TextField>
    </Box>
  );
}