import React from 'react'
import ConItem from '../ConItem'
import { Menu, Dropdown } from 'antd'
import cls from 'classnames'
import { layerWidth } from 'stores/funcs/newEvent'
import FormulaEditor from 'src/components/common/formulaEditor/EventFormulaEditor'

const MenuItem = Menu.Item

export default class BlockLoopConItem extends ConItem {
  constructor(props) {
    super(props)
  }

  getValueWidth() {
    const groupLayer = this.props.groupLayer > 0 ? this.props.groupLayer : 0
    const nestingLayer =
      this.props.nestGroupLayer > 0 ? this.props.nestGroupLayer - 1 : 0
    const extraGapGroupLayer =
      this.props.extraGapGroupLayer > 0
        ? (this.props.extraGapGroupLayer - 1) * 2
        : 0
    let originWidth =
      224.5 - ((groupLayer + nestingLayer) * 2) / 2 - extraGapGroupLayer / 2
    let width = layerWidth({
      originWidth: originWidth + this.state.widthDelta / 2,
      decreaseFactor: 10.5,
      layer: this.props.layer
    })
    return {
      width: width + 'px'
    }
  }

  render() {
    let conFlagsMenu = () => {
      return (
        <Menu className="loop-con-flag-select-menu" onClick={this.onChangeFlag}>
          {this.state.conFlags.map(option => {
            return (
              <MenuItem
                key={option}
                className={cls({
                  selected: this.isSelectedFlag(option)
                })}
              >
                {this.getOptionName(option)}
              </MenuItem>
            )
          })}
        </Menu>
      )
    }

    let conOperatorsMenu = () => {
      return (
        <Menu
          className="loop-con-operator-select-menu"
          onClick={this.onChangeOperator}
        >
          {this.state.conOperatorOptions.map(option => {
            return (
              <MenuItem
                key={option}
                className={cls({
                  selected: this.isSelectedOperator(option)
                })}
              >
                {option}
              </MenuItem>
            )
          })}
        </Menu>
      )
    }

    return (
      <div className="con-item f--hlc">
        {this.props.index === 0 ? (
          <React.Fragment>
            <div className="item-enable" />
            <div className="item-flag">{this.getConItemFlagName()}</div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <div className="item-enable" />
            <Dropdown
              trigger={['click']}
              getPopupContainer={triggerNode => triggerNode.parentNode}
              overlayClassName={'loop-con-flag-dropdown'}
              overlay={conFlagsMenu()}
            >
              <div className="loop-con-flag-select f--hlc">
                <input
                  value={this.getConItemFlagName()}
                  readOnly={true}
                  className="ant-dropdown-input"
                />
                <div className="ant-dropdown-icon" />
              </div>
            </Dropdown>
          </React.Fragment>
        )}
        <div className="item-value-wrap f--h" style={this.getValueWidth()}>
          <FormulaEditor
            className="loop-formula-editor"
            uid={this.props.bid + 'value1'}
            bid={this.props.bid}
            value={this.state.conItem.value1}
            onChangeCode={this.onChangeValue.bind(this, 'value1')}
          />
        </div>
        <Dropdown
          trigger={['click']}
          getPopupContainer={triggerNode => triggerNode.parentNode}
          overlayClassName={'loop-con-operator-dropdown'}
          overlay={conOperatorsMenu()}
        >
          <div className="loop-con-operator-select f--hlc">
            <input
              value={this.state.conItem.operator}
              readOnly={true}
              className="ant-dropdown-input"
            />
            <div className="ant-dropdown-icon" />
          </div>
        </Dropdown>
        <div className="item-value-wrap f--h" style={this.getValueWidth()}>
          <FormulaEditor
            className="loop-formula-editor"
            uid={this.props.bid + 'value2'}
            bid={this.props.bid}
            value={this.state.conItem.value2}
            params={this.formulaExtraParams()}
            onChangeCode={this.onChangeValue.bind(this, 'value2')}
          />
        </div>
        <button
          className="btn-clear btn-con-item-del btn-loop-con-item-del"
          onClick={this.onDeleteCon}
        />
        {this.props.index === 0 ? (
          <button className="btn-clear btn-add-con" onClick={this.onAddCon}>
            <div className="btn-icon">
              <span className="horizon" />
              <span className="vertical" />
            </div>
          </button>
        ) : null}
      </div>
    )
  }
}