import React from 'react'
import {HOC, Link} from 'cerebral-view-react'

import PageProgress from '../PageProgress'

// View
class AutoReload extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      secondsElapsed: 0
    }
    this.onInterval = this.onInterval.bind(this)
  }
  componentWillMount () {
    this.intervals = []
  }
  componentWillUnmount () {
    this.intervals.forEach(clearInterval)
  }
  componentDidMount () {
    this.setInterval(this.onInterval, 1000)
  }
  setInterval () {
    this.intervals.push(setInterval.apply(null, arguments))
  }
  onInterval () {
    let secondsElapsed = 0
    if (this.props.isEnabled) {
      secondsElapsed = this.state.secondsElapsed + 1
      if (secondsElapsed >= this.props.triggerAfterSeconds) 

    }
    if (secondsElapsed !== this.state.secondsElapsed) {
      this.setState({
        secondsElapsed: secondsElapsed
      })
    }
  }
  trigger () {
    this.props.triggers.map((trigger) => trigger())
  }
  triggerNow (e) {
    if (e) {
      e.preventDefault()
    }
    if (this.props.isEnabled) {
      if (this.state.secondsElapsed > 0) {
        this.trigger()
        this.setState({
          secondsElapsed: 0
        })
      }
    }
  }
  render () {
    const signals = this.props.signals
    const progress = {
      isEnabled: this.props.isEnabled,
      elapsed: this.state.secondsElapsed,
      total: this.props.triggerAfterSeconds
    }
    return (
      <div>
        <PageProgress {...progress} />
        <hr />
        <pre>
          BastardAutoloaderFromHell<br />
          =========================<br />
          [{'='.repeat(this.state.secondsElapsed)}{'.'.repeat(this.props.triggerAfterSeconds - this.state.secondsElapsed - 1)}]<br />
          isEnabled: {this.props.isEnabled ? 'yepp' : 'nope'}<br />
          triggerAfterSeconds: {this.props.triggerAfterSeconds}<br />
          numberOfTriggers: {this.props.triggers.length}<br />
          secondsElapsed: {this.state.secondsElapsed}<br />
          secondsBeforeReload: {this.props.triggerAfterSeconds - this.state.secondsElapsed}<br />
          -------------------------<br />
          <Link signal={signals.app.reload.reloadingDisabled}>clickmeto_<b>disable</b>_reloading</Link><br />
          --<br />
          <Link signal={signals.app.reload.reloadingEnabled}>clickmeto_<b>enable</b>_reloading</Link><br />
          --<br />
          <Link signal={signals.app.reload.reloadingToggled}>clickmeto_<b>toggle</b>_reloading</Link><br />
          -------------------------<br />
          <a onClick={(e) => this.triggerNow(e)}>clickmeto_<b>trigger_NOW</b></a><br />
          -------------------------<br />
          <Link signal={signals.app.reload.triggerIntervalChanged} params={{interval: 10}}>clickmeto_reload_@<b>10_seconds</b></Link><br />
          --<br />
          <Link signal={signals.app.reload.triggerIntervalChanged} params={{interval: 20}}>clickmeto_reload_@<b>20_seconds</b></Link><br />
          --<br />
          <Link signal={signals.app.reload.triggerIntervalChanged} params={{interval: 30}}>clickmeto_reload_@<b>30_seconds</b></Link><br />
          --<br />
          <Link signal={signals.app.reload.triggerIntervalChanged} params={{interval: 60}}>clickmeto_reload_@<b>60_seconds</b></Link><br />
          ====<br />
          <i>designed by pbit</i>
        </pre>
      </div>
    )
  }
}

// Model
AutoReload.propTypes = {
  isEnabled: React.PropTypes.bool,
  triggerAfterSeconds: React.PropTypes.number,
  signals: React.PropTypes.object,
  triggers: React.PropTypes.array
}

AutoReload.defaultProps = {
  triggers: []
}

// Binding
const StatefullAutoReload = HOC(AutoReload, {
  isEnabled: ['app', 'reload', 'isEnabled'],
  triggerAfterSeconds: ['app', 'reload', 'triggerAfterSeconds']
})

// API
export default StatefullAutoReload

{
        this.trigger()
        secondsElapsed = 0
      }