import React from 'react'
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,
  }

  componentDidMount() {
    this.blink()
  }

  observableState = toCommonState(this.props)

  blink = () => {
    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