/**
 * imui.Dropdown.DropdownOption
 * @author howenhuo
 * @date 2018-05-15
 */
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Icon from '../../icon/index';

const OptionShape = PropTypes.shape({
  /**
   * value字段会作为key要保证唯一性
   * onChange 回调时返回value
   * 设置默认选中是根据value是否相等来判断
   */
  value: PropTypes.any,
  /**
   * 用于在下拉列表里显示每个选项的样子
   * 以及选中改选项后组件中间显示的文字
   * 如果该属性是react元素将把这个元素显示在选项列表里
   * 否则将作为文字显示
   * 如果display==null，display=value
   */
  display: PropTypes.any,
  /**
   * 用于搜索时的关键字匹配
   * 如果search==null，search=value
   */
  search: PropTypes.string,
});

/**
 * 下拉组件-选项
 */
class DropdownOption extends React.Component {

  static propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    /**
     * 下拉列表选项数据
     */
    option: OptionShape,
    /**
     * 当前option是否不可选
     */
    disabled: PropTypes.bool,
    /**
     * 是否在下拉列表的被选中的项的右侧显示选中icon
     */
    showSelectedIcon: PropTypes.bool,
  };

  static defaultProps = {
    disabled: false,
  };

  static contextTypes = {
    dropdown: PropTypes.object,
  };

  isSelected = () => {
    const { option } = this.props;
    const context = this.context.dropdown;
    const { selectedOption } = context.state;
    return selectedOption && option.value === selectedOption.value;
  }

  isVisible = () => {
    const { option } = this.props;
    const context = this.context.dropdown;
    const { searchKeyword, firstFocus } = context.state;
    const { onSearch } = context.props;
    return firstFocus || onSearch || option.search.indexOf(searchKeyword) >= 0;
  }

  onClick = () => {
    const selected = this.isSelected();
    if (!selected) {
      this.context.dropdown.onSelect(this.props.option);
    }
  }

  render() {
    const { style, className, option, disabled, children } = this.props;
    const { showSelectedIcon, searchable } = this.context.dropdown.props;
    const visible = !searchable || this.isVisible();
    const selected = this.isSelected();
    return (
      <li
        className={classNames('im-dropdown-dropdown-option', className, {
          selected,
          disabled,
        })}
        style={{
          ...style,
          display: visible ? 'block' : 'none',
        }}
        onClick={this.onClick}
      >
        {children || (
          <React.Fragment>
            {option.display || option.value}
            {showSelectedIcon && selected && <Icon className="selected-icon" type={'right'} />}
          </React.Fragment>
        )}
      </li>
    );
  }
}

export default DropdownOption;