import type { Ref } from 'vue'
import { computed, ref, unref } from 'vue'

export interface UseFullScreenContext {
    wrapClassName: Ref<string | undefined>
    modalWrapperRef: Ref<ComponentRef>
    extHeightRef: Ref<number>
}

export function useFullScreen(context: UseFullScreenContext) {
    // const formerHeightRef = ref(0);
    const fullScreenRef = ref(false)

    const getWrapClassName = computed(() => {
        const clsName = unref(context.wrapClassName) || ''
        return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName)
    })

    function handleFullScreen(e: Event) {
        e && e.stopPropagation()
        fullScreenRef.value = !unref(fullScreenRef)

        // const modalWrapper = unref(context.modalWrapperRef);

        // if (!modalWrapper) return;

        // const wrapperEl = modalWrapper.$el as HTMLElement;
        // if (!wrapperEl) return;
        // const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement;

        // if (!modalWrapSpinEl) return;

        // if (!unref(formerHeightRef) && unref(fullScreenRef)) {
        //   formerHeightRef.value = modalWrapSpinEl.offsetHeight;
        // }

        // if (unref(fullScreenRef)) {
        //   modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`;
        // } else {
        //   modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`;
        // }
    }
    return { getWrapClassName, handleFullScreen, fullScreenRef }
}
