import { TweenLite, Back } from 'gsap'

function parseISOLocal(s) {
    if (!s) {
        return new Date()
    }
    var b = s.split(/\D/)
    return new Date(b[0], b[1] - 1, b[2], b[3], b[4], b[5]);
}

// JSON.parse()

/*eslint-disable */
try {
    var stats = JSON.parse(window.stats).Clocks
    var root = window.urlApi
} catch (e) {
    var stats = []
    var root = '/'
    console.log('catch');
}
/*eslint-enable */

const counter = (comp, node) => {
    comp.init(() => {
        this.__shareButton = node.querySelector('#share-button')
        this.__nextButton = node.querySelector('#counter-next')
        this.__prevButton = node.querySelector('#counter-prev')
        this.__shareBtnText = node.querySelector('#share-button-text')

        if (stats.length > 1) {
            comp.elm.className += ' -slide-on'
        }

        this.__shareButton.addEventListener('click', () => {
            this.shareHandler()
        })
        this.__nextButton.addEventListener('click', () => {
            let n = (this.__selectedIndex + 1) % stats.length
            this.select(n)
        })
        this.__prevButton.addEventListener('click', () => {
            let n = (this.__selectedIndex - 1) % stats.length
            if (n < 0) {
                n += stats.length
            }
            this.select(n)
        })

        this.__t0 = parseISOLocal(window.t0)
        this.__t1 = new Date()

        this.__title = new StringAnimation(node.querySelector('.counter-title'), 'EVERY ', ', A WOMAN IS A VICTIM')
        this.__info = new StringAnimation(node.querySelector('#counter-info-subtitle'), '--------------------------------------------------------------------------------------------------------------------------------> OF ', ' <--------------------------------------------------------------------------------------------------------------------------------')
        this.__content = new StringReveal(node.querySelector('#counter-text')) // new StringAnimation(node.querySelector('#counter-text'), 'MULHERES', '')

        this.counter = new Counter(node)
        this.counter.display = 0
        this.select(0)

        this.__lastW = window.innerWidth

        window.onresize = () => {
            let ww = window.innerWidth

            if ((ww > 1200 && this.__lastW <= 1200) || (ww <= 1200 && this.__lastW > 1200)) {
                this.updateMainText()
            }
            this.__lastW = ww
        }
    })

    this.select = (index) => {
        if (stats.length <= 0) {
            return false
        }
        this.__multiplier = stats[index].y_total / 365 / 24 / 60 / 60
        this.__selectedIndex = index
        this.update(true)

        let t = (1 / this.__multiplier).toFixed(1)

    /* eslint-disable */
         ~~t == t ? t = ~~t : t = (t)

        let s
        let dec
        if (t >= 3600) {
            t /= 3600
            s = parseFloat(t.toPrecision(2))
            ~~s == s ? s = parseInt(s).toString() : s.toString()
            s += (t > 2) ? '</span> HOURS' : '</span> HOUR'
        }
        else if (t >= 60 && t < 3600) {
            t /= 60
            s = parseFloat(t.toPrecision(2))
            ~~s == s ? s = parseInt(s).toString() : s.toString()
            s += (t >= 2) ? '</span> MINUTES' : '</span> MINUTE'
        }
        else {
            s = String(t)
            s += (t >= 2) ? '</span> SECONDS' : '</span> SECOND'
        }
        /* eslint-enable */

        this.updateMainText()

        this.__title.to(s)
        this.__info.to(stats[index].label)
    }

    this.updateMainText = () => {
        let ctext = (stats[this.__selectedIndex].content)
        if (window.innerWidth <= 1200) {
            ctext = ctext.replace(/<br[^>]*>/gi, ' ')
        }
        // this.__content.innerHTML = 'MULHERES' + ctext
        this.__content.to(ctext)
    }

    this.createTimer = () => {
        this.updateLoop = setInterval(this.update.bind(this), 400)
    }

    this.getCurrentDate = () => {
        let now = new Date()
        let dif = now.getTime() - this.__t1.getTime()
        return (new Date(this.__t0.getTime() + dif))
    }

    this.update = (slow) => {
        let tm = this.getCurrentDate()
        let s = tm.getSeconds()
        let m = tm.getMinutes()
        let h = tm.getHours()

        let ts = s + (60 * m) + (60 * 60 * h)
        let n = Math.round(ts * this.__multiplier)
        let time = (slow) ? 1.5 : 0.2
        let callback = (slow) ? this.createTimer.bind(this) : null

        if (slow) {
            clearInterval(this.updateLoop)
        }

        if (n !== this.counter.display) {
            TweenLite.to(this.counter, time, {
                display: n,
                ease: Back.easeOut.config(slow ? 1.5 : 3),
                onComplete: callback
            })
        }
    }

    this.shareHandler = () => {
        let setErrorState = function() {
            comp.publish('img-share', 'http://clocksofviolence.com/assets/img/en/relogios-da-violencia-share-site.jpg')
            comp.publish('open-share', document.location.href)
            this.__shareBtnText.innerHTML = 'SHARE THIS CLOCK'
        }.bind(this)

        this.__shareBtnText.innerHTML = 'WAIT'
        let idx = this.__selectedIndex
        if (idx >= 10) {
            idx++
        }

        // let url = 'http://mariadapenha.aceite.fbiz.com.br/relogio-da-violencia/api'
        // let url = window.hyojun.config.root + 'api'
        let url = root
        let data = 'shareId=' + stats[idx].shareId
        let request = new XMLHttpRequest()
        request.open('POST', url, true)
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        request.onload = () => {
            if (request.status >= 200 && request.status < 400) {
                let response = JSON.parse(request.responseText)
                if (response.success) {
                    comp.publish('img-share', response.imageSrc)
                    comp.publish('open-share', response.shareUrl)
                    this.__shareBtnText.innerHTML = 'SHARE THIS CLOCK'
                } else {
                    console.error('api failed', response.erro || 'unkown')
                    setErrorState()
                }
            } else {
                console.error('request status not ok')
                setErrorState()
            }
        }
        request.onerror = () => {
            console.error('request failed')
            setErrorState()
        }
        request.send(data)
    }

}

class Counter {
    constructor(node) {
        this.__size = 5
        this.__digits = []
        this.__dot = node.querySelector('#counter-dot')

        let i, el, dg
        for (i = 0; i < this.__size; i++) {
            el = node.querySelector('#counter-digit-' + (i + 1))
            dg = new Digit(el)
            this.__digits.push(dg)
        }

        this.display = 0
    }

    get display() {
        return (this.__display)
    }
    set display(value) {
        if (value < 0) {
            value = 0
        }
        this.__display = value
        let i, d, d10, v, r
        for (i = 0; i < this.__size; i++) {
            d = Math.pow(10, i)
            if (Math.ceil(value) <= d) {
                this.__digits[i].number = 0
//              this.__digits[i].visible = false
                continue
            }
            d10 = (d - 1) / (d)
            v = (value / d) % 10
            r = (v % 1) - d10
            r = Math.pow(Math.max(r * d, 0), 2)
            this.__digits[i].number = Math.floor(v) + r
//          this.__digits[i].visible = true
        }

//      this.__dot.style.visibility = (value >= 1000) ? 'visible' : 'hidden'
    }
}

class Digit {
    constructor($el) {
        this.__el = $el
        this.__numbers = []
        this.__v = true

        this.__container = document.createElement('div')
        this.__container.style.position = 'absolute'
        this.__el.appendChild(this.__container)

        let i, nb
        for (i = 0; i <= 10; i++) {
            nb = new DNumber(i)
            this.__container.appendChild(nb.element)
            this.__numbers.push(nb)
        }
    }

    get number() {
        return (this.__number)
    }
    set number(value) {
        this.__number = value
        this.__container.style.top = -((value % 10) * 100) + '%'
    }

    get visible() {
        return (this.__v)
    }
    set visible(value) {
        if (value === this.__v) {
            return
        }
        this.__v = value
        if (!value) {
            this.__el.className += ' hidden'
        } else {
            this.__el.className = this.__el.className.replace(' hidden', '')
        }
    }
}

class DNumber {
    constructor(n) {
        this.element = document.createElement('div')
        this.element.className = 'number number-' + n
        this.rotation = 0
    }
}

class StringAnimation {
    constructor(target, left, right) {
        this.__target = target
        this.__left = left
        this.__right = right
        this.__step = 0
        this.__message = ''
    }

    to(string) {
        if (this.__message.length > 0) {
            TweenLite.to(this, (this.__message.length + 1) * 0.02, {
                step: 0,
                onComplete: () => {
                    this.__message = ''
                    this.to(string)
                }
            })
        } else {
            this.__message = string
            TweenLite.to(this, (string.length + 1) * 0.05, {
                step: (string.length)
            })
        }
    }

    get step() {
        return (this.__step)
    }
    set step(value) {
        this.__step = value

        let i, s
        s = ''
        for (i = 0; i < value; i++) {
            if (value >= i + 1) {
                s += this.__message.charAt(i)
            } else {
                s += String.fromCharCode(Math.floor(Math.random() * 74) + 48)
            }
        }

        this.__target.innerHTML = this.__left + s + this.__right
    }
}

class StringReveal {
    constructor(target) {
        this.__target = target
        this.__step = 0
    }

    to(string) {
        this.__message = string
        this.__step = 0
        this.__target.innerHTML = string
        TweenLite.killTweensOf(this)
        TweenLite.to(this, 2, {
            step: 1
        })
    }

    get step() {
        return (this.__step)
    }
    set step(value) {
        this.__step = value
        this.__target.style.opacity = value
    }

    get target() {
        return (this.__target)
    }
}

jails('counter', counter)
jails.start()