let isSupport: undefined | boolean

const ELEMENT_STYLES = [
    'position: fixed',
    'z-index: -1',
    'height: constant(safe-area-inset-top)',
    'height: env(safe-area-inset-top)'
]

const ELEMENT_ID = 'safe-area-element'


export default function getSafeAreaSupport () {
    if (typeof isSupport !== 'undefined') {
        return isSupport
    }

    const div = document.createElement('div')
    div.style.cssText = ELEMENT_STYLES.join(';')
    div.id = ELEMENT_ID

    document.body.appendChild(div)
    const element = document.getElementById(ELEMENT_ID)

    if (element) {
        isSupport = element.offsetHeight > 0
        element.parentNode?.removeChild(element)
    }

    return isSupport
};

import { onMounted, ref } from 'vue';

const ELEMENT_STYLES = [
    'position: fixed',
    'z-index: -1',
    'height: constant(safe-area-inset-top)',
    'height: env(safe-area-inset-top)'
]

const ELEMENT_ID = 'safe-area-element'


export default function useSafeAreaSupport () {
    const isSupport = ref<undefined | boolean>()

    const defineSafeAreaSupport = () => {
        const div = document.createElement('div')
        div.style.cssText = ELEMENT_STYLES.join(';')
        div.id = ELEMENT_ID

        document.body.appendChild(div)
        const element = document.getElementById(ELEMENT_ID)

        if (element) {
            isSupport.value = element.offsetHeight > 0
            element.parentNode?.removeChild(element)
        }
    }
    
    onMounted(defineSafeAreaSupport)
    
    return {
        isSupport
    }
}