import { TextArea } from "@progress/kendo-react-inputs";
import { Style } from "../../DomainProps";
import withValidations from "../../../hoc/withValidations";
import withHelperText from "../../../hoc/withHelperText";
import withLabel from "../../../hoc/withLabel";
import withToolTip from "../../../hoc/withToolTip";

type TextAreaViewProps = {
  rows?: number;
  autoSize?: boolean;
  fillMode?: "solid" | "flat" | "outline" | null;
  resizable?: "both" | "none" | "horizontal" | "vertical";
  widgetStyle?: Style;
  placeHolder?: string;
  value?: string | number;
  disabled?: boolean;
  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 TextAreaWidgetView = ({
  widgetStyle,
  disabled,
  rows,
  value,
  placeHolder,
  autoSize,
  defaultValue,
  fillMode,
  resizable,
  name,
  onChange,
  onBlur,
  onKeyDown,
  onKeyUp,
  onFocus,
}: TextAreaViewProps) => {
  return (
    <TextArea
      id={widgetStyle?.id || ""}
      className={widgetStyle?.className || ""}
      style={widgetStyle?.inline || {}}
      disabled={disabled}
      rows={rows}
      value={value !== undefined && value !== null ? value : ""}
      placeholder={placeHolder}
      autoSize={autoSize}
      defaultValue={defaultValue}
      fillMode={fillMode}
      resizable={resizable}
      name={name}
      onChange={onChange}
      onKeyDown={onKeyDown}
      onKeyUp={onKeyUp}
      onBlur={onBlur}
      onFocus={onFocus}
    />
  );
};

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