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 BlockEventTrigger from './base/event/BlockEventTrigger'

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

  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()
              )}
            />
          ) : 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={26} overflow={true} scrollContainer={jengaContent}>
        <div className="block-wrap block-wrap-event f--h">
          <span
            className={cls(
              'index-line index-line-event',
              'index-line-' + this.getLineColor(),
              {
                'index-last-line': this.props.isLast
              }
            )}
            style={this.indexLeftStyle()}
          />
          <div
            className={cls('flex-1', {
              'flex-wrap-disabled': !this.state.isEnable
            })}
          >
            <div
              className={cls('block-item block-event 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 block-main-event 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"
                />
                <div className="event-trigger-wrap">
                  <BlockEventTrigger
                    bid={this.props.bid}
                    isEnable={this.state.isEnable}
                    eventNodeId={this.props.eventNodeId}
                  />
                </div>
              </div>
              <BlockCite
                bid={this.props.bid}
                eventNodeId={this.props.eventNodeId}
              />
              <BlockMemo
                className="block-event-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>
    )
  }
}