import * as React from 'react';
import * as PropTypes from 'prop-types';

import classNames from '../../../utils/classnames';
import FormCell from '../formcell';
import { usePlatform } from '../../../utils/platform';
import { Input as TeaInput } from 'tea-component';
export default function Input({
  // 系统属性
  id,
  className,
  style,
  events,
  // 组件属性
  label,
  labelVisible,
  name,
  defaultValue,
  password,
  placeholder,
  type,
  maxLength,
  disabled,
  focus: autoFocus,
  layout,
  requiredFlag,
  size,
}) {
  const platform = usePlatform();
  const cls = classNames({
    'weda-ui': true,
    'weda-input': true,
    [className]: className,
  });
  const subCls = classNames({
    'weui-cell': true,
    'weui-cell_active': true,
    'weui-cell_form': true,
    'weui-cell_disabled': disabled,
  });
  const inputType = getInputType(type, password);

  const [value, setValue] = React.useState(defaultValue);
  // 两次默认值不同时, 需要刷新value
  const prevDefaultValueRef = React.useRef();
  React.useEffect(() => {
    if (prevDefaultValueRef.current !== defaultValue) {
      prevDefaultValueRef.current = defaultValue;
      setValue(defaultValue);
    }
  });

  const onChange = function (e) {
    const text = typeof e === 'string' ? e : e.target.value;
    if (maxLength > 0 && text.length > maxLength) {
      return;
    }
    const newValue = text;
    setValue(newValue);
    events.change({ value: newValue }, { originEvent: e });
  };

  const onClear = function (e) {
    events.clear({ originValue: value }, { originEvent: e });
    setValue('');
    e.preventDefault();
  };

  const onKeyDown = function (e) {
    // 确认逻辑
    if (e.key === 'enter' || e.keyCode === 13) {
      events.confirm({ value: e.target.value }, { originEvent: e });
    }
    // 数字类型的键盘, 不能输入e
    if (inputType === 'number' && e.key === 'e') {
      e.preventDefault();
    }
  };

  const onFocus = function (e) {
    events.focus({ value: e.target.value }, { originEvent: e });
  };

  const onBlur = function (e) {
    events.blur({ value: e.target.value }, { originEvent: e });
  };

  const inputElement = (
    <>
      <input
        className="weui-input"
        type={inputType}
        placeholder={placeholder}
        value={value}
        disabled={disabled}
        name={name}
        autoFocus={autoFocus}
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        onKeyDown={onKeyDown}
      />
      <button
        className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
        onMouseDown={onClear}
      >
        <i className="weui-icon-clear"></i>
      </button>
    </>
  );
  return (
    <FormCell
      id={id}
      className={cls}
      style={style}
      label={labelVisible ? label : null}
      layout={layout}
      multiCell={false}
      requiredFlag={requiredFlag}
      size={size}
    >
      {platform === 'h5' ? (
        <div className={subCls}>
          <div className="weui-cell__bd weui-flex">{inputElement}</div>
        </div>
      ) : (
        <TeaInput
          size={size}
          type={inputType}
          placeholder={placeholder}
          value={value}
          disabled={disabled}
          name={name}
          autoFocus={autoFocus}
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
          onKeyDown={onKeyDown}
        />
      )}
    </FormCell>
  );
}

function getInputType(type, password) {
  if (password) {
    return 'password';
  }
  switch (type) {
    case 'idcard':
      return 'text';
    case 'digit':
      return 'number';
    default:
      return type;
  }
}
