import type { Ref } from 'vue';

import type { ComponentRef } from '@vben/types/global';

import { computed, ref, unref } from 'vue';

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

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`;
    // }
  }
  function resetFullScreen() {
    fullScreenRef.value = false;
  }
  return { fullScreenRef, getWrapClassName, handleFullScreen, resetFullScreen };
}