import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';

export function Input(props) {
  const { className = '', value, onChange, placeholder, empty } = props;
  return <input className={`${className} ${empty ? 'empty' : ''}`} value={value} placeholder={placeholder} onChange={data => onChange && onChange(data)} />;
}

export function Textarea(props) {
  const { className = '', value, onChange, placeholder, empty } = props;
  return <textarea className={`${className} ${empty ? 'empty' : ''}`} value={value} placeholder={placeholder} onChange={data => onChange && onChange(data)} />;
}

export class DefaultInput extends Component {
  render() {
    const { className = '', onChange, placeholder, value, error, left, right, empty } = this.props;
    return (
      <div className={`g-input-container ${className}`}>
        <div className={`g-input-wrapper ${error ? 'error' : ''}`}>
          {left && <div className="g-input-left">{left}</div>}
          <Input
            className="g-input"
            placeholder={placeholder}
            value={value}
            empty={empty}
            onChange={data => onChange && onChange(data)}
          />
          {right && <div className="g-input-right">{right}</div>}
        </div>
        <div hidden={!error} className="g-input-error">
          {error}
        </div>
      </div>
    );
  }
}

export class SelectInput extends Component {
  constructor(props) {
    super(props);
    this.state = { showSelect: false };
  }

  render() {
    const { showSelect } = this.state;
    const { className = '', onChange, placeholder, value, error, empty, selectValue, select, onSelect } = this.props;
    return (
      <DefaultInput
        className={className}
        left={
          <span className="g-input-left-select" onClick={() => this.setState({ showSelect: !showSelect })}>
            {selectValue}
            <Icon type={showSelect ? 'up' : 'down'} />
            {showSelect && (
              <ul className="select-list">
                {select.map(row => {
                  return (
                    <li
                      onClick={() => {
                        this.setState({ showSelect: false });
                        if (onSelect) onSelect(row.value);
                      }}
                    >
                      {row.label}
                    </li>
                  );
                })}
              </ul>
            )}
          </span>
        }
        value={value}
        placeholder={placeholder}
        onChange={data => onChange && onChange(data)}
        error={error}
        empty={empty}
      />
    );
  }
}

export class VerificationInput extends Component {
  constructor(props) {
    super(props);
    this.timeKey = null;
    this.state = { loading: 0 };
  }

  componentWillUnmount() {
    if (this.timeKey) clearTimeout(this.timeKey);
  }

  onSend() {
    const { onSend, time = 60 } = this.props;
    if (onSend) {
      onSend().then(() => {
        if (this.timeKey) clearTimeout(this.timeKey);
        this.setTime(time);
      });
    }
  }

  setTime(time) {
    this.setState({ loading: time });
    this.timeKey = setTimeout(() => {
      this.setTime(time - 1);
    }, 1000);
  }

  render() {
    const { loading } = this.state;
    const { className = '', onChange, placeholder, value, error, empty } = this.props;
    return (
      <DefaultInput
        className={className}
        right={
          loading <= 0 ? (
            <span className="g-input-right-verification" onClick={() => this.onSend()}>
              获取验证码
            </span>
          ) : (<span className="g-input-right-verification-loading">等待{loading}秒</span>)
        }
        value={value}
        error={error}
        empty={empty}
        placeholder={placeholder}
        onChange={data => onChange && onChange(data)}
      />
    );
  }
}