import {ref, useSSRContext} from "vue";
import type {Ref, UnwrapRef} from "vue"

export type AdaptiveContext = {
    isMobile: boolean
    isTablet: boolean
    isSmallTablet: boolean
    isDesktop: boolean
}

const isBrowser = typeof window !== undefined && process.client
const computeIsMobile = (): boolean =>
    isBrowser ? window.matchMedia('(max-width: 560px)').matches : false

const computeIsSmallTablet = (): boolean =>
    isBrowser ? window.matchMedia('(max-width: 767px)').matches : false
const computeIsTablet = (): boolean =>
    isBrowser ? window.innerWidth >= 768 && window.innerWidth < 1024 : false
const computeIsDesktop = (): boolean =>
    isBrowser ? window.innerWidth >= 1024 : false

export const useAdaptive = (): Ref<AdaptiveContext> => {
    const ctx = ref<UnwrapRef<AdaptiveContext>>({
        isDesktop: computeIsDesktop(),
        isMobile: computeIsMobile(),
        isTablet: computeIsTablet(),
        isSmallTablet: computeIsSmallTablet()
    })

    const setValues = () =>
        (ctx.value = {
            isDesktop: computeIsDesktop(),
            isMobile: computeIsMobile(),
            isTablet: computeIsTablet(),
            isSmallTablet: computeIsSmallTablet()
        })


    onMounted(() => {
            window.addEventListener('resize', setValues, { passive: true })
        }
    )
    onUnmounted(() => window.removeEventListener('resize', setValues))

    return ctx
}