export default class FollowWidget {

    constructor(updateCallback = () => {}) {
        this.updateCallback = updateCallback
        this.value = false
    }

    onAdd(map) {
        this.map = map

        const className = (active) => 'mapboxgl-ctrl-icon mapboxgl-ctrl-geolocate' + (active ? ' mapboxgl-watching' : '')

        this.container = document.createElement('div')
        this.button    = document.createElement('button')
        this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
        this.button.className = className(false)
        this.button.onclick = () => {
            this.value = !this.value
            this.button.className = className(this.value)
            this.updateCallback(this.value)
        }
        this.container.appendChild(this.button)
        return this.container
    }

    onRemove() {
        this.button.onclick = () => {}
        this.container.removeChild(this.button)
        this.container.parentNode.removeChild(this.container)
        this.map = undefined
    }
}
