import React from 'react'
import PropTypes from 'prop-types'
import { observer } from 'xmobx/mobx-react'
import { toCommonState, CommonState } from 'src/state'
import { BlinkProps } from './typings'
import { defaultRenderWrapper, defaultRenderChildren } from './renderProps'

@observer
class Blink extends React.Component<BlinkProps, CommonState> {
  static defaultProps = {
    className: '',
    duration: 530,
    renderChildren: defaultRenderChildren,
    renderWrapper: defaultRenderWrapper,
  }
  static propTypes = {
    className: PropTypes.string,
    duration: PropTypes.number,
    children: PropTypes.node,
    state: PropTypes.object,
    renderChildren: PropTypes.func,
    renderWrapper: PropTypes.func,
  }

  timeout?: number
  observableState = toCommonState(this.props)

  componentDidMount() {
    this.blink()
  }
  componentWillUnmount() {
    clearInterval(this.timeout)
  }

  /**
   * @todo this should really be an action on the state?
   */
  blink() {
    this.timeout = setInterval(
      this.observableState.toggleVisibility,
      this.props.duration
    )
  }

  render() {
    const { renderChildren, renderWrapper, ...remainingProps } = this.props
    const children = renderChildren(remainingProps)
    return renderWrapper({ children, ...remainingProps }, this.observableState)
  }
}

export { Blink }
export default Blink