'use strict'
var attrs: string[] = ['top', 'left', 'right', 'bottom']
var inited: boolean
var elementComputedStyle = {}
var support: string

function getSupport() {
    if(!('CSS' in window) || typeof CSS.supports != 'function') {
        support = ''
    } else if(CSS.supports('top: env(safe-area-inset-top)')) {
        support = 'env'
    } else if(CSS.supports('top: constant(safe-area-inset-top)')) {
        support = 'constant'
    } else {
        support = ''
    }
    return support
}

function init() {
    support = typeof support === 'string' ? support : getSupport()
    if(!support) {
        attrs.forEach((attr: string) => {
            elementComputedStyle[attr] = 0
        })
        return
    }

    function setStyle(el: HTMLElement, style) {
        var elStyle: CSSStyleDeclaration = el.style
        Object.keys(style).forEach(key => {
            var val: string = style[key]
            elStyle[key] = val
        })
    }

    var cbs: Function[] = []
    function parentReady(callback?: Function) {
        if(callback) {
            cbs.push(callback)
        } else {
            cbs.forEach(cb => {
                cb()
            })
        }
    }

    var passiveEvents: any = false
    try {
        var opts = Object.defineProperty({}, 'passive', {
            get: function() {
                passiveEvents = { passive: true }
            }
        })
        window.addEventListener('test', null, opts)
    } catch(e) {

    }

    function addChild(parent: HTMLElement, attr: string) {
        var a1: HTMLElement = document.createElement('div')
        var a2: HTMLElement = document.createElement('div')
        var a1Children: HTMLElement = document.createElement('div')
        var a2Children: HTMLElement = document.createElement('div')
        var W: number = 100
        var MAX: number = 10000
        var aStyle = {
            position: 'absolute',
            width: W + 'px',
            height: '200px',
            boxSizing: 'border-box',
            overflow: 'hidden',
            paddingBottom: `${support}(safe-area-inset-${attr})`
        }
        setStyle(a1, aStyle)
        setStyle(a2, aStyle)
        setStyle(a1Children, {
            transition: '0s',
            animation: 'none',
            width: '400px',
            height: '400px'
        })
        setStyle(a2Children, {
            transition: '0s',
            animation: 'none',
            width: '250%',
            height: '250%'
        })
        a1.appendChild(a1Children)
        a2.appendChild(a2Children)
        parent.appendChild(a1)
        parent.appendChild(a2)

        parentReady(() => {
            a1.scrollTop = a2.scrollTop = MAX
            var a1LastScrollTop: number = a1.scrollTop
            var a2LastScrollTop: number = a2.scrollTop
            function onScroll() {
                if(this.scrollTop === (this === a1 ? a1LastScrollTop : a2LastScrollTop)) {
                    return
                }
                a1.scrollTop = a2.scrollTop = MAX
                a1LastScrollTop = a1.scrollTop
                a2LastScrollTop = a2.scrollTop
                attrChange(attr)
            }
            a1.addEventListener('scroll', onScroll, passiveEvents)
            a2.addEventListener('scroll', onScroll, passiveEvents)
        })

        var computedStyle: CSSStyleDeclaration = getComputedStyle(a1)
        Object.defineProperty(elementComputedStyle, attr, {
            configurable: true,
            get() {
                return parseFloat(computedStyle.paddingBottom)
            }
        })
    }

    var parentDiv: HTMLElement = document.createElement('div')
    setStyle(parentDiv, {
        position: 'absolute',
        left: '0',
        top: '0',
        width: '0',
        height: '0',
        zIndex: '-1',
        overflow: 'hidden',
        visibility: 'hidden',
    })
    attrs.forEach(key => {
        addChild(parentDiv, key)
    })
    document.body.appendChild(parentDiv)
    parentReady()
    inited = true
}

function getAttr(attr: string): number {
    if(!inited) {
        init()
    }
    return elementComputedStyle[attr]
}

var changeAttrs: string[] = []
function attrChange(attr: string) {
    if(!changeAttrs.length) {
        setTimeout(() => {
            var style = {}
            changeAttrs.forEach(attr => {
                style[attr] = elementComputedStyle[attr]
            })
            changeAttrs.length = 0
            callbacks.forEach(callback => {
                callback(style)
            })
        }, 0)
    }
    changeAttrs.push(attr)
}

var callbacks: Function[] = []
function onChange(callback: Function) {
    if(!getSupport()) {
        return
    }
    if(!inited) {
        init()
    }
    if(typeof callback === 'function') {
        callbacks.push(callback)
    }
}

function offChange(callback: Function) {
    var index = callbacks.indexOf(callback)
    if(index >= 0){
        callbacks.splice(index, 1)
    }
}

var safeAreaInsets = {
    get support(): boolean {
        return (typeof support === 'string' ? support : getSupport()).length != 0
    },
    get top(): number {
        return getAttr('top')
    },
    get left(): number {
        return getAttr('left')
    },
    get right(): number {
        return getAttr('right')
    },
    get bottom(): number {
        return getAttr('bottom')
    },
    onChange,
    offChange
}

export = safeAreaInsets