import type { CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
import type { SxValue } from "../CSSFab";

export type InputType = "default" | "textarea" | "password";
export type InputSize = "small" | "medium" | "large" | "huge";
export type InputStatus = "default" | "error";

export interface InputProps
  extends Omit<InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, "style" | "className" | "size" | "type" | "onChange"> {
  /** 输入类型 */
  type?: InputType;
  /** 尺寸 */
  size?: InputSize;
  /** 校验状态 */
  status?: InputStatus;
  /** Style extension via CSSFab sx */
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  /** 点击事件 */
  onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  /** 值变化回调，参数为当前输入值 */
  onChange?: (value: string) => void;
  /** 受控值 */
  value?: string;
  /** 非受控默认值 */
  defaultValue?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 占位文案 */
  placeholder?: string;
  /** 最大字符数 */
  maxlength?: number;
}

declare function Input(props: InputProps): JSX.Element;

// antd 风格：Input.MaterialInput / const { MaterialInput } = Input
interface InputNamespace {
  (props: InputProps): JSX.Element;
  MaterialInput: typeof MaterialInput;
}

declare const InputWithType: InputNamespace;
export { InputWithType as Input };
export default Input;

// MaterialInput 类型
export type MaterialInputSize = "small" | "medium" | "large" | "huge";

export interface MaterialInputLocaleText {
  label?: string;
}

export interface MaterialInputProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, "style" | "className" | "size" | "onChange" | "type"> {
  /** 浮动标签文案 */
  label?: string;
  /** 原生 input type */
  type?: string;
  /** 尺寸 */
  size?: MaterialInputSize;
  /** Style extension via CSSFab sx */
  sx?: SxValue;
  style?: CSSProperties;
  className?: string;
  /** 值变化回调，参数为当前输入值 */
  onChange?: (value: string) => void;
  /** 受控值 */
  value?: string;
  /** 非受控默认值 */
  defaultValue?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 覆盖标签文案 */
  localeText?: MaterialInputLocaleText;
}

declare function MaterialInput(props: MaterialInputProps): JSX.Element;

export { MaterialInput };