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 BlockCite from './base/BlockCite'
import BlockMemo from './base/BlockMemo'
import BlockEnable from './base/BlockEnable'
import BlockConCons from './base/con/BlockConCons'

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

  getConBtnStyle() {
    if (this.props.nestGroupLayer > 1) {
      return { left: `${(this.props.nestGroupLayer - 1) * 2}px` }
    }
    return null
  }

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

    let getRelChildComs = () => {
      return this.state.hasChildren ? (
        <button
          className={cls(
            'btn-clear btn-toggle-sub btn-expand',
            'btn-toggle-sub-' +
              (this.state.isExpand ? 'expand-' : 'collapse-') +
              this.getLineColor()
          )}
          onClick={this.onToggleBlockExpand}
        />
      ) : (
        <div
          className={cls(
            'btn-clear btn-toggle-sub btn-toggle-sub-empty',
            'btn-toggle-sub-empty-' + this.getLineColor()
          )}
        />
      )
    }

    return (
      <LazyLoad height={26} overflow={true} scrollContainer={jengaContent}>
        <div className="block-wrap block-wrap-con 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-con 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}
              >
                <div
                  id={'over-cover-' + this.props.bid}
                  className="over-cover"
                />
                <BlockConCons
                  groupLayer={this.props.groupLayer}
                  nestGroupLayer={this.props.nestGroupLayer}
                  extraGapGroupLayer={this.extraGapGroupLayer()}
                  layer={this.props.layer}
                  bid={this.props.bid}
                  eventNodeId={this.props.eventNodeId}
                />
                <BlockEnable
                  className="btn-toggle-con-enable"
                  style={this.getConBtnStyle()}
                  bid={this.props.bid}
                  isEnable={this.state.isEnable}
                  eventNodeId={this.props.eventNodeId}
                />
              </div>
              <BlockCite
                bid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
              />
              <BlockMemo
                className="block-con-memo"
                active={this.state.isActive}
                bid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
              />
            </div>
            {this.state.isExpand ? (
              <BlockChildren
                loops={this.getLoops()}
                layer={this.props.layer + 1}
                groupLayer={this.props.groupLayer}
                nestGroupLayer={0}
                offspringInNestGroupLayer={this.props.nestGroupLayer}
                extraGapGroupLayer={this.extraGapGroupLayer()}
                parentBid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
                visibleBlockIds={this.props.visibleBlockIds}
              />
            ) : null}
          </div>
        </div>
      </LazyLoad>
    )
  }
}