import React from 'react'
import LazyLoad from 'react-lazyload'
import cls from 'classnames'
import newEventStores from 'stores/newEvent'
import Block from './base/Block'
import BlockOrder from './base/BlockOrder'
import BlockDel from './base/BlockDel'
import BlockCommentWrap from './base/comment/BlockCommentWrap'

export default class BlockComment extends Block {
  constructor(props) {
    super(props)
    this.state.showComment = newEventStores.showComment

    this.changeShowComment = this.changeShowComment.bind(this)
  }

  changeShowComment(showComment) {
    if (this.state.showComment !== showComment) {
      this.setState({ showComment })
    }
  }

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

    let getRelChildComs = () => {
      return (
        <div
          className={cls(
            'btn-clear btn-toggle-sub btn-toggle-sub-empty',
            'btn-toggle-sub-empty-' + this.getLineColor(),
            { 'btn-toggle-sub-comment-zip': !this.state.showComment }
          )}
        />
      )
    }

    return (
      <LazyLoad height={26} overflow={true} scrollContainer={jengaContent}>
        <div className="block-wrap block-wrap-comment f--h">
          <span
            className={cls('index-line', 'index-line-' + this.getLineColor(), {
              'index-last-line': this.props.isLast,
              'index-last-line-comment-zip': !this.state.showComment,
              '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-comment 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}
                className={
                  !this.state.showComment ? 'block-order-comment-zip' : ''
                }
                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"
                />
                <BlockCommentWrap
                  bid={this.props.bid}
                  eventNodeId={this.props.eventNodeId}
                  changeShowComment={this.changeShowComment}
                />
              </div>
            </div>
          </div>
        </div>
      </LazyLoad>
    )
  }
}