import React from 'react';
import { Icon, Dropdown, Menu, Button, Balloon } from '@txdfe/at';
import './index.scss';

const { PopConfirm } = Balloon;

class SubmitPanel extends React.Component {
  state = {
    popConfirmVisible: false,
  }

  onConfirm= () => {
    this.props.onOk();
    this.onVisibleChange(false);
  }

  onVisibleChange= (popConfirmVisible) => {
    this.setState({ popConfirmVisible });
  }

  onChangeRole = (index) => {
    const { customRoles, setIndexState } = this.props;
    setIndexState('currentRole', customRoles[index]);
  }

  showValue = () => {
    this.props.setIndexState('currentStep', 'value');
  }

  render() {
    const { currentValue, currentRole, customRoles, cancelText, okText, onCancel, onOk, mode, confirmProps } = this.props;
    return (
      <div className="uiless-member-submit">
        <div className="uiless-member-submit-text">
          已选&nbsp;<span className="uiless-member-submit-count" onClick={this.showValue}>{currentValue.length}</span>&nbsp;个对象
          {
            customRoles.length > 0 &&
            <span>
              , 添加为&nbsp;
              <Dropdown
                trigger={<a className="uiless-member-submit-role">{currentRole.label}&nbsp;<Icon size="small" type="chevron-down" /></a>}
                triggerType={['click']}
                container={this.panelRef}
                align="bl tl"
                offset={[0, -8]}
              >
                <Menu onItemClick={this.onChangeRole}>
                  {
                    customRoles.map((item, index) => (
                      <Menu.Item key={index} className="uiless-member-submit-menu">
                        {currentRole.value === item.value && <Icon size="small" type="tick" />}
                        {item.label}
                      </Menu.Item>))
                  }
                </Menu>
              </Dropdown>
            </span>
          }
        </div>
        <Button size="small" onClick={onCancel} style={{ marginRight: 12 }} type="normal">{cancelText}</Button>
        { confirmProps && !(mode === 'add' && currentValue.length === 0) ?
          <PopConfirm
            title={confirmProps.title}
            content={confirmProps.content}
            type={confirmProps.type}
            visible={this.state.popConfirmVisible}
            trigger={<Button size="small" type="primary">{okText}</Button>}
            triggerType="click"
            onConfirm={this.onConfirm}
            onCancel={() => this.onVisibleChange(false)}
            onVisibleChange={this.onVisibleChange}
            align="tr"
          />
          :
          <Button size="small" disabled={mode === 'add' && currentValue.length === 0} onClick={onOk} type="primary">{okText}</Button>
        }
      </div>
    );
  }
}

export default SubmitPanel;