import {
  Box,
  FormControl,
  FormHelperText,
  Input,
  InputLabel,
} from "@material-ui/core";

const PREFIX = "number-field";

function kebab(str) {
  return str.replaceAll(" ", "-").toLowerCase();
}

export function NumberField({
  name,
  description,
  value = 0,
  setValue = () => { },
  ...rest
}) {
  const inputId = `${PREFIX}-${kebab(name)}`;
  const describeId = `${PREFIX}-${kebab(name)}-describe`;

  const handleChange = (event) => {
    setValue(event.target.value);
  }
  return (
    <Box sx={{ my: 2 }}>
      <FormControl fullWidth>
        <InputLabel htmlFor={inputId}>{name}</InputLabel>
        <Input
          id={inputId}
          aria-describedby={describeId}
          type="number"
          value={value}
          onChange={handleChange}
          {...rest}
        />
        <FormHelperText id={describeId}>{description}</FormHelperText>
      </FormControl>
    </Box>
  );
}
