import { Connect } from "dob-react"
import * as React from "react"
import * as Styled from "./index.style"
import * as typings from "./index.type"

@Connect
class ViewportGuideline extends React.Component<typings.Props, typings.State> {
  public static defaultProps = new typings.Props()
  public state = new typings.State()

  private timeOut: any

  public componentDidMount() {
    this.props.actions.EventAction.on(this.props.stores.EventStore.viewportUpdated, this.handleViewportUpdated)
    this.updateTimeout()
  }

  public componentWillUnmount() {
    this.props.actions.EventAction.off(this.props.stores.EventStore.viewportUpdated, this.handleViewportUpdated)
    clearTimeout(this.timeOut)
  }

  public render() {
    // 正在拖拽中不显示
    if (this.props.stores.ViewportStore.currentDragInfo !== null) {
      return null
    }

    // 没有 hover 元素不显示
    if (this.props.stores.ViewportStore.currentHoverInstanceKey === null) {
      return null
    }

    const targetBoundingClientRect = this.props.stores.ViewportStore.instanceDoms.get(this.props.stores.ViewportStore.currentHoverInstanceKey).getBoundingClientRect()
    const viewportBoundingClientRect = this.props.stores.ViewportStore.viewportDOM.getBoundingClientRect()

    const style = {
      width: targetBoundingClientRect.width - 1,
      height: targetBoundingClientRect.height - 1,
      top: targetBoundingClientRect.top - viewportBoundingClientRect.top,
      left: targetBoundingClientRect.left - viewportBoundingClientRect.left
    }

    return (
      <Styled.Container style={style} />
    )
  }

  /**
   * 视图区域更新时触发
   */
  private handleViewportUpdated = () => {
    this.forceUpdate()
    this.updateTimeout()
  }

  /**
   * 更新定时器
   */
  private updateTimeout = () => {
    if (this.timeOut) {
      clearTimeout(this.timeOut)
    }

    this.timeOut = setInterval(() => {
      if (this.props.stores.ViewportStore.currentDragInfo !== null) {
        return null
      }

      // 没有 hover 元素不显示
      if (this.props.stores.ViewportStore.currentHoverInstanceKey === null) {
        return null
      }

      this.forceUpdate()
    }, 200)
  }
}

export default {
  position: "viewport",
  class: ViewportGuideline
}