import React, { Component } from 'react';
import './index.less';
import Button from '../Button';

export default class Select extends Component {
  constructor(props) {
    super(props);
    this.state = { selecting: false };
  }

  componentWillMount() {}

  componentWillUnmount() {}

  open() {
    this.setState({ selecting: true });
  }

  close() {
    this.setState({ selecting: false });
  }

  render() {
    const { selecting } = this.state;
    const {
      className = '',
      placeholder,
      value,
      list = [],
      size = 'basic',
      theme = 'theme',
      excludeSelf,
      onChange,
    } = this.props;
    let index = -1;
    for (let i = 0; i < list.length; i += 1) {
      if (list[i].key === value) {
        index = i;
        break;
      }
    }
    if (!value) {
      index = -1;
    }
    // 未选中，显示占位符
    // 无占位符，显示第一个
    // 没有内容，显示占位符
    if (index < 0 && !placeholder) {
      index = 0;
    }

    const title = list.length > 0 && index >= 0 ? list[index].title : placeholder;
    return (
      <div className={`select ${className} ${theme || ''} ${size}`}>
        <div hidden={!selecting} className="mask" onClick={() => this.close()} />
        <div className={`select-warp ${selecting ? 'active' : ''}`}>
          <Button size={size} theme={theme} radius onClick={() => this.open()}>
            {title} <i className={selecting ? 'up-arrow' : 'down-arrow'} />
          </Button>
          <div className={`select-body ${selecting ? 'selected' : ''}`}>
            {list.map((item, i) => {
              if (excludeSelf && index === i) return null;
              return (
                <div
                  className="select-option"
                  onClick={() => {
                    if (onChange) onChange(item);
                    this.close();
                  }}
                >
                  {item.title}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}