import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Dropdown from '../../dropdown/lib/Dropdown';
// @require '../style/table_sort.scss'

/**
 * 排序
 */
class TableSort extends React.Component {

  static propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    /**
     * 所有的排序选项
     * 当options只有一个选项时不会有dropdown用于选择排序选项，直接默认只能使用第一个
     */
    options: PropTypes.arrayOf(PropTypes.shape({
      /**
       * 用来展示
       */
      display: PropTypes.any.isRequired,
      /**
       * 用于回调
       */
      key: PropTypes.any.isRequired,
    })).isRequired,
    /**
     * 默认的排序方法的value
     */
    defaultSort: PropTypes.string,
    /**
     * 默认的排序方向
     * 1=顺序
     * -1=逆序
     */
    defaultOrder: PropTypes.oneOf([1, -1]),
    /**
     * 当排序的方式或者方向发生变化时回调
     * {
     *    sort,
          order,
       }
     */
    onChange: PropTypes.func,
    /**
     * 当前是否处于激活起作用态,处于激活状态排序指针的会高亮显示
     */
    active: PropTypes.bool,
    /**
     * 下拉菜单的width px
     */
    dropdownWidth: PropTypes.number,
  };

  static defaultProps = {
    active: true,
  };

  state = {
    /**
     * 按照哪个选项来排序
     */
    sort: this.props.defaultSort,
    /**
     * 排序方向是顺序还是逆序
     */
    order: this.props.defaultOrder,
    active: this.props.active,
  };

  constructor(props) {
    super(props);
    this.tran2Dropdown(props);
    if (this.state.sort == null) {
      this.state.sort = this.props.options[0].key;
    }
  }

  componentWillReceiveProps(nextProp) {
    this.tran2Dropdown(nextProp);
    this.setState({
      active: nextProp.active,
    });
  }

  tran2Dropdown = (props) => {
    const { options } = props;
    // 让options符合dropdown的接口
    options.forEach(one => {
      if (one.key != null) {
        one.value = one.key;
      }
    });
  }

  changeSort = (sort) => {
    let { order } = this.state;
    if (order == null) {
      order = 1;
    }
    this.setState({
      sort,
      order,
    }, () => {
      this.notifyChange();
    });
  };

  changeSortWay = (order) => {
    this.setState({
      order,
    }, () => {
      this.notifyChange();
    });
  };

  notifyChange = () => {
    const { onChange } = this.props;
    const { sort, order } = this.state;
    if (typeof onChange === 'function') {
      onChange({
        sort,
        order,
      });
    }
  };

  render() {
    const { options, dropdownWidth, className, style } = this.props;
    const { sort, order, active } = this.state;
    return (
      <div className={classnames('im-table-sort', className)} style={style}>
        <div className="im-table-sort-text">
          {options.length > 1 ?
            <Dropdown
              noBorder
              noIcon
              hoverable
              showSelectedIcon
              options={options}
              value={sort}
              onChange={this.changeSort}
              dropdownWidth={dropdownWidth}
            /> : <span>{options[0].display}</span>}
        </div>
        <div className="im-table-sort-icon-wrap">
          <span
            onClick={() => this.changeSortWay(1)}
            className={classnames('im-table-sort-icon im-table-sort-icon-top', {
              'im-table-sort-icon-top-selected': active && order === 1,
            })}
          > </span>
          <span
            onClick={() => this.changeSortWay(-1)}
            className={classnames('im-table-sort-icon im-table-sort-icon-bottom', {
              'im-table-sort-icon-bottom-selected': active && order === -1,
            })}
          > </span>
        </div>
      </div>
    );
  }

}

export default TableSort;