import React from 'react';
import {
  CommonEvent,
  Input as TaroInput,
  View,
  Text,
} from '@tarojs/components';
import classNames from 'classnames';

interface InputProps {
  /** 类型 */
  type?:
    | 'number' //数字
    | 'text' //文本
    | 'digit'; //小数点
  /** 禁用状态 */
  disabled?: boolean;
  /** 标签 */
  label?: string;
  /** 输入框的初始内容 */
  defaultValue?: string;
  /** 尺寸 */
  size?: 'large' | 'middle' | 'small';
  /** 获取焦点 */
  focus?: boolean;
  /** 下分割线 */
  underline?: boolean;
  /** 占位提示符 */
  placeholder?: string;
  /** 最大长度 */
  maxlength?: number;
  /** 输入回调 */
  onInput?: (event: CommonEvent) => void;
  /** 获取焦点回调 */
  onFocus?: (event: CommonEvent) => void;
  /** 失去焦点回调 */
  onBlur?: (event: CommonEvent) => void;
  /** 点击键盘完成触发 */
  onConfirm?: (event: CommonEvent) => void;
}

/**
 * 输入框组件
 */
const Input: React.FC<InputProps> = ({
  type = 'text',
  size = 'middle',
  underline = true,
  disabled = false,
  focus = false,
  placeholder = '',
  label = '',
  defaultValue = '',
  maxlength = 140,
  onInput = (_event: CommonEvent) => {},
  onFocus = (_event: CommonEvent) => {},
  onBlur = (_event: CommonEvent) => {},
  onConfirm = (_event: CommonEvent) => {},
}) => {
  const boxStyle = classNames(
    'wm-input',
    `wm-input-${size}`,
    underline && 'wm-input-underline',
  );

  return (
    <View className={boxStyle}>
      {!!label && <Text className='label'>{label}</Text>}
      <TaroInput
        type={type}
        focus={focus}
        disabled={disabled}
        placeholder={placeholder}
        value={defaultValue}
        maxlength={maxlength}
        onInput={onInput}
        onFocus={onFocus}
        onBlur={onBlur}
        onConfirm={onConfirm}
        className='wm-input-h5'
        placeholderClass='wm-input-placeholder'
      />
    </View>
  );
};

export default Input;