/**
 * Created by baoyinghai on 12/27/16.
 */
import React, { PropTypes } from 'react';
import moment from 'moment';
import { Button, Input, DatePicker, Select } from '../mxa';
import RangeInput from './RangeInput';

const { Option } = Select;
const { RangePicker } = DatePicker;

export default class SearchInput extends React.Component {
  static propTypes = {
    prefixCls: PropTypes.string,
    // placeholder: PropTypes.string,
    code: PropTypes.string,
    title: PropTypes.string,
    type: PropTypes.string,
    extra: PropTypes.any,
    operatorType: PropTypes.oneOf(['LIKE', 'BETWEEN', 'EQ']),
    size: PropTypes.oneOf(['small', 'large', 'default']),
    onChange: PropTypes.func,
  };

  static defaultProps = {
    prefixCls: 'mx-search-input',
    placeholder: '',
    type: 'INPUT',
    size: 'default',
  };

  constructor(props) {
    super(props);
    this.state = {
      fieldName: this.props.code,
      value: this.props.value,
      minValue: '',
      maxValue: '',
    };
  }

  _transformDataType = data => {
    // if (this.props.dataType === 'Integer' || this.props.dataType === 'Long' || this.props.dataType === 'Double' || this.props.dataType === 'BigDecimal') {
    //  if (!isNaN(data)) {
    //    return Number(data);
    //  }
    // }
    // if (this.props.dataType === 'String') {
    //   return data;
    // }
    return data;
  }

  _handleMomentToDate(date) {
    if (date && date.toDate) {
      return date.toDate().getTime();
    }
    return date;
  }

  _handleDateChange = (dates, dateStrings) => { // dates: [moment, moment], dateStrings: [string, string]
    console.log('_handleDateChange ===> ', dates, dateStrings);
    const value = [this._handleMomentToDate(dates[0]), this._handleMomentToDate(dates[1])];
    this.props.onChange && this.props.onChange({
      fieldName: this.props.code,
      value
    });
  }

  _handleRangeChange = (left, right) => {
    // console.log('_handleRangeChange ===> left: ', left, ', right: ', right);
    this.props.onChange && this.props.onChange({
      fieldName: this.props.code,
      value: [left, right] //  Issue #25
    });
  }

  _handleSelectChange = value => {
    // console.log('_handleSelectChange ===> ', value);
    this.props.onChange && this.props.onChange({
      fieldName: this.props.code,
      value: value, //  Issue #25
    });
  }

  _handleInputChange = e => {
    const value = this._transformDataType(e.target.value);
    this.setState({ value });
    this.props.onChange && this.props.onChange({
      fieldName: this.props.code,
      value: value, //  Issue #25
    });
  }

  _getPlaceHolder = () => {
    return '请输入' + this.props.title;
  }

  _renderInput = () => {
    const { prefixCls } = this.props;
    if (this.props.type === 'DATEPICKER') {
      return (
        <RangePicker
          size={this.props.size}
          onChange={this._handleDateChange}
          className={prefixCls}
          value={this.props.value && [moment(this.props.value[0]), moment(this.props.value[1])]}
          placeholder={['开始日期', '结束日期']}
        />
      );
    } else if (this.props.type === 'INPUT' && this.props.operatorType === 'BETWEEN') {
      return (
        <RangeInput
          placeholder={['', '']}
          className={prefixCls}
          value={this.props.value}
          onChange={this._handleRangeChange}
        />
      );
    } else if (this.props.type === 'SELECT') {
      return (
        <Select
          showSearch={true}
          style={{ minWidth: '100%', borderRadius: '0px' }}
          className={prefixCls}
          value={this.props.value}
          // placeholder="Select a person"
          optionFilterProp="children"
          onChange={this._handleSelectChange}
          placeholder={this._getPlaceHolder()}
        >
          {
            this.props.extra.map(item => (
              <Option key={item.code} value={item.code}>{item.value}</Option>
            ))
          }
        </Select>
      );
    }

    return (
      <Input
        size={this.props.size}
        className={prefixCls}
        // placeholder={this.props.placeholder}
        value={this.props.value}
        onChange={this._handleInputChange}
        placeholder={this._getPlaceHolder()}
        disabled={this.props.disabled}
      />
    );
  }

  render() {
    const { prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-wrapper`}>
        <div className="search-input-col search-input-col-label">
          <span className={`${prefixCls}-title`}>{this.props.title}</span>
        </div>
        <div className="search-input-col search-input-col-comp">
          {this._renderInput()}
        </div>
      </div>
    );
  }
}
