/**
 * imui.Datepicker - DateInput
 * @author riverhan
 * @data 2016-8-10
 */
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { formatDateStr } from './dateUtils';
import Icon from '../../icon/index';
import Input from '../../input/lib/Input';

class DateInput extends React.Component {

  static propTypes = {
    selected: PropTypes.object,
    onInputClick: PropTypes.func.isRequired,
    dateFormat: PropTypes.string.isRequired,
    showIcon: PropTypes.bool,
    showClean: PropTypes.bool,
    handleClean: PropTypes.func,
    disabled: PropTypes.bool,
    rangeMode: PropTypes.bool,
  };

  static defaultProps = {
    selected: undefined,
    handleClean: () => {
    },
  };

  handleClick = () => {
    this.props.onInputClick();
  };

  render() {
    const {
      selected,
      placeholder,
      dateFormat,
      showIcon,
      showClean,
      rangeMode,
      selectedRange,
      rangeJoin,
      inputWidth,
    } = this.props;
    let value;
    let style = {};

    if (!rangeMode) {
      value = selected ? formatDateStr(selected, dateFormat) : '';
    } else {
      value = selectedRange ? `${formatDateStr(selectedRange.from, dateFormat)}${rangeJoin}\
${formatDateStr(selectedRange.to, dateFormat)}` : '';
    }

    if (inputWidth) {
      style = {
        width: `${inputWidth - 10}px`,
      };
    }

    return (
      <div
        ref="inputWrap"
        className={classnames({
          'im-dp-input--wrap': true,
          disabled: this.props.disabled,
        })}
        onClick={this.handleClick}
      >
        <Input
          value={value}
          placeholder={placeholder}
          readOnly
          style={style}
        />
        <div className="im-dp-input--icon">
          {showClean && value ? <Icon
            type="close"
            onClick={this.props.handleClean}
          /> : null}
          {showIcon ? <Icon type="calendar" /> : null}
        </div>
      </div>
    );
  }
}

export default DateInput;