/**
 * imui.monthPicker - MonthInput
 * @author riverhan
 * @date 2017-2-19
 */

import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { formatDateStr } from '../../datepicker/lib/dateUtils';
import Icon from '../../icon/index';
import Input from '../../input/lib/Input';

class MonthInput 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
  };

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

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

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

    value = selected ? formatDateStr(selected, dateFormat) : '';

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

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

export default MonthInput;