import React from 'react';
import DragSort from '../../libs/DragSort';
import './index.scss';

const tabs = [{
  name: '题目控件',
}, {
  name: '问题大纲',
}, ];

const subjects = [{
  name: '单选题',
  type: 'radio',
  icon: 'icon-danxuanicon',
},
//  {
//   name: '下拉题',
//   type: 'dropdown',
//   icon: 'icon-xialaicon',
// },
 {
  name: '多选题',
  type: 'checkbox',
  icon: 'icon-duoxuan-icon',
}, 
// {
//   name: '单行文本题',
//   type: 'text',
//   icon: 'icon-danhangicon',
// }, {
//   name: '多行文本题',
//   type: 'textarea',
//   icon: 'icon-duohangicon',
// }, {
//   name: '填空题',
//   type: 'input',
//   icon: 'icon-tiankongtiicon',
// }, 
];

class QuestionnairSiderbar extends React.PureComponent {
  state = {
    tabIndex: 0,
    curMoveItem: null,
    editors: [],
  };

  componentWillReceiveProps(nextProps) {
    this.setState({
      editors: nextProps.editors,
    })
  }

  toggleTab = (index) => {
    this.setState({
      tabIndex: index,
    })
  }

  switchIcon = (type) => {
    switch (type) {
      case 'radio':
        return 'icon-danxuanicon';
      case 'dropdown':
        return 'icon-xialaicon';
      case 'checkbox':
        return 'icon-duoxuan-icon';
      case 'textarea':
        return 'icon-duohangicon';
      case 'text':
        return 'icon-danhangicon';
      case 'input':
        return 'icon-tiankongtiicon';
    }
  }

  handleDragMove = (editors, from, to) => {
    const {
      onDragOutline,
    } = this.props;
    if (onDragOutline) {
      onDragOutline(editors)
    }
    this.setState({
      curMoveItem: to,
      editors,
    })
  }

  handleDragEnd = () => {
    this.setState({
      curMoveItem: null,
    })
  }

  clickOutline = (index) => {
    const {
      onClickOutline,
    } = this.props;
    if (onClickOutline) {
      onClickOutline(index)
    }
  }

  render() {
    this.tabs = [];
    const {
      onSelectEditor,
    } = this.props;
    const {
      tabIndex,
      editors,
      curMoveItem,
    } = this.state;
    return (
      <div className='questionnair-siderbar'>
        <div className='siderbar-tab'>
            {tabs.map((data, index) => {
              return (
                <div
                  key={data.name}
                  className={`tab-item ${tabIndex === index && 'tab-item-active'}`}
                  onClick={() => this.toggleTab(index)}
                  ref={(tab) => tab && this.tabs.push(tab)}>
                    {data.name}
                </div>
              )
            })}
        </div>
        <div className='siderbar-menu'>
          <div className='siderbar-menu-content' style={{ display:  0 !== tabIndex && 'none' }}>
            {subjects.map((data, index) => {
              return (
                <div
                  key={data.name}
                  className='siderbar-menu-editors'
                  onClick={() => onSelectEditor(data.type)}>
                    <i className={ `iconfont ${data.icon} siderbar-menu-icon`}></i>
                  <span>{data.name}</span>
                </div>
              )
            })}
          </div>
          <div className='siderbar-menu-content' style={{ display:  1 !== tabIndex && 'none', paddingTop: 12 }}>
            <DragSort
              draggable={true}
              data={editors}
              onDragEnd={this.handleDragEnd}
              onDragMove={this.handleDragMove}>
              {editors.map((data, index) => {
                return (
                  <div
                    className='siderbar-menu-summary'
                    onClick={() => this.clickOutline(index)}
                    style={{
                      border: 'none',
                      cursor: 'move'
                    }}
                    key={data.questionId}>
                    <i className={`iconfont ${this.switchIcon(data.type)} siderbar-menu-icon`}></i>
                    {data.type === 'input' ? (
                      <span className='summary-text'>{data.completionForwards}____{data.completionBackwards}</span>
                    ) : (
                      <span className='summary-text'>{data.title}</span>
                    )}
                    <div
                      className='summary-drag-mask'
                      style={{
                        background: curMoveItem === index ? 'rgba(245,245,245,0.50)' : ''
                      }}>
                    </div>
                  </div>
                )
              })}
            </DragSort>
          </div>
        </div>
      </div>
    )
  }
}

export default QuestionnairSiderbar;