import { FormControl, Input, InputLabel } from "@mui/material";
import { TextInput } from "./TextInput";
import { IMaskInput } from "react-imask";
import React from "react";

interface CustomProps {
  onChange: (event: { target: { name: string; value: string } }) => void;
  name: string;
  placeholder: string;
}

const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
  function TextMaskCustom(props, ref) {
    const { onChange, placeholder, ...other } = props;
    return (
      <IMaskInput
        {...other}
        mask={placeholder}
        definitions={{
          "#": /[1-9]/,
        }}
        inputRef={ref}
        onAccept={(value: any) =>
          onChange({ target: { name: props.name, value } })
        }
        overwrite
      />
    );
  }
);

export function TextMaskInput(p: {
  label: string;
  editable: boolean;
  value?: string;
  onValueChange?: (newVal: string | undefined) => void;
  mask: string;
}): React.ReactElement {
  const id = React.useRef(Math.random());

  if (!p.editable) return <TextInput {...p} />;

  return (
    <FormControl variant="standard" fullWidth>
      <InputLabel htmlFor={`mi-${id.current}`}>{p.label}</InputLabel>
      <Input
        fullWidth
        value={p.value ?? ""}
        onChange={(c) =>
          p.onValueChange?.(
            c.target.value.length === 0 ? undefined : c.target.value
          )
        }
        id={`mi-${id.current}`}
        inputComponent={TextMaskCustom as any}
        placeholder={p.mask}
      />
    </FormControl>
  );
}