const {remote} = require('electron')
const {h, Component} = require('preact')
const classNames = require('classnames')

const Bar = require('./Bar')

const gametree = require('../../modules/gametree')
const helper = require('../../modules/helper')
const setting = remote.require('./modules/setting')
const {sgf} = require('../../modules/fileformats')

class AutoplayBar extends Component {
    constructor() {
        super()

        this.state = {
            playing: false,
            secondsPerMove: setting.get('autoplay.sec_per_move')
        }

        this.handleFormSubmit = evt => {
            evt.preventDefault()
        }

        this.handleValueChange = evt => {
            let value = Math.floor(Math.min(10, Math.max(1, +evt.currentTarget.value)) * 10) / 10

            this.setState({secondsPerMove: value})
            setting.set('autoplay.sec_per_move', value)
        }

        this.handlePlayButtonClick = () => {
            if (this.state.playing) this.stopAutoplay()
            else this.startAutoplay()
        }

        this.startAutoplay = this.startAutoplay.bind(this)
        this.stopAutoplay = this.stopAutoplay.bind(this)
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.mode !== this.props.mode || nextProps.mode === 'autoplay'
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.playing && nextProps.mode !== 'autoplay') this.stopAutoplay()
    }

    startAutoplay() {
        let autoplay = () => {
            sabaki.events.removeListener('navigate', this.stopAutoplay)

            if (!this.state.playing) return

            let tp = gametree.navigate(...this.props.treePosition, 1)
            if (!tp) return this.stopAutoplay()

            let node = tp[0].nodes[tp[1]]

            if (!node.B && !node.W) {
                sabaki.setCurrentTreePosition(...tp)
            } else {
                let vertex = sgf.point2vertex(node.B ? node.B[0] : node.W[0])
                sabaki.makeMove(vertex, {player: node.B ? 1 : -1})
            }

            sabaki.events.addListener('navigate', this.stopAutoplay)
            this.autoplayId = setTimeout(autoplay, this.state.secondsPerMove * 1000)
        }

        this.setState({playing: true})
        autoplay()
    }

    stopAutoplay() {
        sabaki.events.removeListener('navigate', this.stopAutoplay)
        clearTimeout(this.autoplayId)

        this.setState({playing: false})
    }

    render(_, {
        secondsPerMove,
        playing
    }) {
        return h(Bar, Object.assign({type: 'autoplay', class: classNames({playing})}, this.props),
            h('form', {onSubmit: this.handleFormSubmit},
                h('label', {},
                    h('input', {
                        type: 'number',
                        name: 'duration',
                        value: secondsPerMove,
                        min: 1,
                        max: 10,
                        step: 0.1,

                        onChange: this.handleValueChange
                    }),
                    ' sec per move'
                )
            ),

            h('a', {class: 'play', href: '#', onClick: this.handlePlayButtonClick})
        )
    }
}

module.exports = AutoplayBar

@@ -345,16 +345,46 @@
 mats')%0A%0A
+const max_sec_per_move = 99;%0A%0A
 class Au
@@ -748,18 +748,32 @@
 ath.min(
-10
+max_sec_per_move
 , Math.m
@@ -808,19 +808,9 @@
 ue))
- * 10) / 10
+)
 %0A%0A  
@@ -2947,18 +2947,32 @@
    max: 
-10
+max_sec_per_move
 ,%0A      
@@ -2999,10 +2999,8 @@
 ep: 
-0.
 1,%0A%0A

Allow up to 99s per move in Autoplay, step by 1s