/* eslint-disable brace-style */
import React from 'react'
import { isFunction } from 'exotic'
// import { computed } from 'xmobx'
import { isLink, isAnimated, hasSnackbar } from './deps'
import { BaseButtonProps, ButtonState } from './typings'

interface ButtonContainerType {
  // these were removed
  handleTouchStart?: React.TouchEventHandler<ButtonContainerType>
  handleTouchMove?(event: React.TouchEvent<any>): void
  handleTouchEnd?(event: React.TouchEvent<any>): void
  // important ones
  handleKeyDown(event: React.KeyboardEvent<any>): void
  handleClick(event: React.MouseEvent<any>): void
}

const isActiveAndAnimated = props => props.isActive === true && isAnimated(props)

class BaseButtonAtomStateful extends React.Component<BaseButtonProps, ButtonState>
  implements ButtonContainerType {
  clickTimeout: number | NodeJS.Timer
  doubleClickTimeout: number | NodeJS.Timer
  isTouching: boolean
  justClicked: boolean
  state: ButtonState

  /**
   * @description handles keydown enter - auto works with isFocused
   */
  handleKeyDown = event => {
    if (event.key === 'Enter') {
      this.handleClick(event)
      this.state.activate()
    } else if (event.key === 'Space' || event.key === ' ') {
      // ada
      if (isLink(this.props) === true) {
        this.handleClick(event)
        this.state.activate()
      }
    } else {
      console.log(event.key)
      // @Note this causes errors on Tabbing through modals
      // this.state.deactivate()
    }
  }

  private debounceClick = () => (this.justClicked = false)

  private handleActiveTimeout = () => {
    this.state.handleInactive()
    this.forceUpdate()
  }
  private internalClickHandler = event => {
    console.log('BUTTON_CLICK')

    // not on state, don't trigger update
    this.justClicked = true
    clearTimeout(this.doubleClickTimeout)
    this.doubleClickTimeout = setTimeout(this.debounceClick, 10)

    const baseButtonOnClick = this.props.handleClick || this.props.onClick
    if (isFunction(baseButtonOnClick)) {
      baseButtonOnClick(event)
    }

    if (hasSnackbar(this.props) === true) {
      this.state.setActive(true)
      this.activeTimeout = setTimeout(this.handleActiveTimeout, 2000)
    }
    if (this.isAnimated === true) {
      this.state.setActive(true)
      // clearTimeout(this.activeTimeout)
      this.activeTimeout = setTimeout(this.state.handleInactive, this.props.timeout)
    }
  }

  handleClick = event => {
    if (isActiveAndAnimated(this.props) === true) {
      clearTimeout(this.clickTimeout)
      this.clickTimeout = setTimeout(this.handleClick, this.props.timeout)
      return
    }
    if (this.justClicked === true) {
      // console.log('DBL_CLICK')
      return
    }
    if (this.isTouching === true) {
      return
    }

    this.internalClickHandler(event)
  }
}

export { BaseButtonAtomStateful }
export default BaseButtonAtomStateful