import withHelperText from "../../../hoc/withHelperText";
import withLabel from "../../../hoc/withLabel";
import withToolTip from "../../../hoc/withToolTip";
import withValidations from "../../../hoc/withValidations";
import { Style } from "../../DomainProps";
import {
  renderMaskedTextBox,
  renderNumericTextBox,
  renderTextBox,
} from "./renderers";

export enum ROLE {
  MASKTEXTBOX = "MASKTEXTBOX",
  NUMERICTEXTBOX = "NUMERICTEXTBOX",
  TEXTBOX = "TEXTBOX",
}

export interface TextBoxProps {
  widgetStyle?: Style;
  type?: string;
  max?: number;
  min?: number;
  placeHolder?: string;
  role?: ROLE;
  value?: string | number;
  disabled?: boolean;
  mask?: string;
  defaultValue?: string | number;
  name: string;
  readOnly?: boolean;
  onChange: (event: any) => void;
  onKeyDown: (event: any) => void;
  onKeyUp: (event: any) => void;
  onBlur: (event: any) => void;
  onFocus: (event: any) => void;
}

const renderers = {
  [ROLE.MASKTEXTBOX]: renderMaskedTextBox,
  [ROLE.NUMERICTEXTBOX]: renderNumericTextBox,
  [ROLE.TEXTBOX]: renderTextBox,
};

const TextBoxWidgetView: React.FC<TextBoxProps> = ({  ...rest }) => {
  const { role = ROLE.TEXTBOX } = rest;
  const Renderer = renderers[role];
  const renderProps = {
    ...rest
  };
  return <Renderer {...renderProps} />;
};

export default withValidations(
  withToolTip(withHelperText(withLabel(TextBoxWidgetView)))
);
