import React from 'react'
import ReactDOM from 'react-dom'
import LazyLoad from 'react-lazyload'
import cls from 'classnames'
import newEventActions from 'actions/newEvent'
import Block from './base/Block'
import BlockOrder from './base/BlockOrder'
import BlockDel from './base/BlockDel'
import BlockCite from './base/BlockCite'
import BlockMemo from './base/BlockMemo'
import BlockActionObject from './base/action/BlockActionObject'
import BlockActionMethod from './base/action/BlockActionMethod'

export default class BlockAction extends Block {
  constructor(props) {
    super(props)

    this.actionObject = React.createRef()
    this.actionMethod = React.createRef()
    this.onToggleParamsVisible = this.onToggleParamsVisible.bind(this)
  }

  onToggleParamsVisible(e) {
    let objDom = ReactDOM.findDOMNode(this.actionObject)
    let mthDom = ReactDOM.findDOMNode(this.actionMethod)
    if (
      !(
        (objDom && objDom.contains(e.target)) ||
        (mthDom && mthDom.contains(e.target))
      ) &&
      !(
        e.target &&
        e.target.classList &&
        e.target.classList.contains('objectPickerTooltip__item')
      )
    ) {
      newEventActions.toggleActionParamsVisible({
        blockId: this.props.bid,
        visible: 'part'
      })
      newEventActions.changeActionParamSubChildrenItemVisible({
        blockId: this.props.bid,
        visible: 'part'
      })
    }
  }

  render() {
    let jengaContent = document.getElementsByClassName('jenga-content')[0]

    let getRelChildComs = () => {
      return this.state.hasChildren ? (
        <React.Fragment>
          {this.state.isExpand ? (
            <span
              className={cls(
                'index-line',
                'index-main-line',
                'index-line-' + this.getNextLineColor()
              )}
              style={this.indexLeftStyle()}
            />
          ) : null}
          <button
            className={cls(
              'btn-clear btn-toggle-sub btn-expand',
              'btn-toggle-sub-' +
                (this.state.isExpand ? 'expand-' : 'collapse-') +
                this.getLineColor()
            )}
            onClick={this.onToggleBlockExpand}
          />
        </React.Fragment>
      ) : (
        <div
          className={cls(
            'btn-clear btn-toggle-sub btn-toggle-sub-empty',
            'btn-toggle-sub-empty-' + this.getLineColor()
          )}
        />
      )
    }

    return (
      <LazyLoad height={45} overflow={true} scrollContainer={jengaContent}>
        <div className="block-wrap block-wrap-action f--h">
          <span
            className={cls('index-line', 'index-line-' + this.getLineColor(), {
              'index-last-line': this.props.isLast,
              'index-virtual-layer': this.props.virtualLayer
            })}
            style={this.indexLeftStyle()}
          />
          <div
            className={cls('flex-1', {
              'flex-wrap-disabled': !this.state.isEnable
            })}
          >
            <div
              className={cls('block-item block-action f--h', {
                'block-active': this.state.isActive
              })}
              // onDragOver={this.onDragOver}
              // onDrop={this.onDrop}
              onClick={this.onSelectBlock}
              onContextMenu={this.onContextMenu}
            >
              <BlockDel
                isActive={this.state.isActive}
                layer={this.props.layer}
                bid={this.props.bid}
              />
              <BlockOrder
                layer={this.props.layer}
                bid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
                extraGapGroupLayer={this.extraGapGroupLayer()}
              />
              <div
                className="block-gap"
                style={{
                  left: -this.getGapLeft() + 'px',
                  padding: '0 ' + this.getGapLeft() / 2 + 'px'
                }}
              />
              {getRelChildComs()}
              <div
                id={'block-main-' + this.props.bid}
                className="block-main flex-1 f--h"
                style={this.blockMainStyle()}
                draggable={true}
                // onDragStart={this.onDragStart}
                // onDragEnd={this.onDragEnd}
                // onClick={this.onToggleParamsVisible}
              >
                <div
                  id={'over-cover-' + this.props.bid}
                  className="over-cover"
                />
                <BlockActionObject
                  ref={node => (this.actionObject = node)}
                  bid={this.props.bid}
                  isEnable={this.state.isEnable}
                  loops={this.getLoops()}
                  eventNodeId={this.props.eventNodeId}
                />
                <BlockActionMethod
                  ref={node => (this.actionMethod = node)}
                  bid={this.props.bid}
                  groupLayer={this.props.groupLayer}
                  nestGroupLayer={this.props.nestGroupLayer}
                  extraGapGroupLayer={this.extraGapGroupLayer()}
                  layer={this.props.layer}
                  eventNodeId={this.props.eventNodeId}
                />
              </div>
              <BlockCite
                bid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
              />
              <BlockMemo
                className="block-action-memo"
                active={this.state.isActive}
                bid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
              />
            </div>
          </div>
        </div>
      </LazyLoad>
    )
  }
}