import React from 'react'
import LazyLoad from 'react-lazyload'
import cls from 'classnames'
import Block from './base/Block'
import BlockChildren from './base/BlockChildren'
import BlockOrder from './base/BlockOrder'
import BlockDel from './base/BlockDel'
import BlockDescWrap from './base/group/BlockDescWrap'
import BlockEnable from './base/BlockEnable'

export default class BlockGroup extends Block {
  constructor(props) {
    super(props)
  }

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

    let getRelChildComs = () => {
      return this.state.hasChildren ? (
        <div className="f--h">
          <div
            className={cls(
              'btn-clear btn-toggle-sub btn-toggle-sub-empty',
              'btn-toggle-sub-empty-' + this.getLineColor(),
              'btn-toggle-sub-empty-small'
            )}
            style={{ marginTop: '9px' }}
          />
          <button
            className={cls('btn-clear btn-toggle-sub btn-toggle-group f--hcc')}
            onClick={this.onToggleBlockExpand}
          >
            <div className={cls('icon', { collpase: !this.state.isExpand })} />
          </button>
        </div>
      ) : (
        <div
          className={cls(
            'btn-clear btn-toggle-sub btn-toggle-sub-empty',
            'btn-toggle-sub-empty-' + this.getLineColor()
          )}
        />
      )
    }

    let extraLineCom = () => {
      return (
        this.state.isExpand &&
        this.state.hasChildren && (
          <div
            style={{
              left: -this.getGapLeft() + 'px',
              marginLeft: this.getGapLeft() - 1 + 'px'
            }}
            className={cls(
              'index-line',
              'index-extra-children',
              'index-line-' + this.getLineColor()
            )}
          />
        )
      )
    }

    return (
      <LazyLoad height={26} overflow={true} scrollContainer={jengaContent}>
        <div
          className={cls(
            'block-wrap block-wrap-group f--h',
            `block-wrap-group-${this.getGroupColor()}`
          )}
        >
          <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 block-wrapper-inner', {
              'flex-wrap-disabled': !this.state.isEnable
            })}
          >
            <div
              className={cls('block-item block-group 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'
                }}
              />
              {extraLineCom()}
              {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}
              >
                <div
                  id={'over-cover-' + this.props.bid}
                  className="over-cover"
                />
                <BlockEnable
                  className="btn-toggle-con-enable"
                  bid={this.props.bid}
                  isEnable={this.state.isEnable}
                  eventNodeId={this.props.eventNodeId}
                />
                <BlockDescWrap
                  bid={this.props.bid}
                  hasGroupExtraLine={
                    this.props.groupLayer === 0 && this.state.hasChildren
                  }
                />
              </div>
            </div>
            {/*group 不需要设置layer+1*/}
            {this.state.isExpand ? (
              <BlockChildren
                loops={this.getLoops()}
                layer={this.props.layer}
                groupLayer={this.props.groupLayer + 1}
                nestGroupLayer={this.props.nestGroupLayer + 1}
                offspringInNestGroupLayer={this.props.nestGroupLayer + 1}
                extraGapGroupLayer={this.extraGapGroupLayer()}
                parentBid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
                visibleBlockIds={this.props.visibleBlockIds}
                virtualLayer={this.props.layer}
              />
            ) : null}
          </div>
        </div>
      </LazyLoad>
    )
  }
}