import { onMounted, onUnmounted } from 'vue';

const appHeight = () => {
  const doc = document.documentElement;
  const windowVH = window.innerHeight / 100;
  doc.style.setProperty('--vh', windowVH + 'px');
  doc.style.setProperty('--imageHeight', `${window.innerHeight}px`);
};

export const useAppHeight = () => {
  onMounted(() => {
    appHeight();
    window.addEventListener('resize', appHeight);
    window.addEventListener('orientationchange', appHeight);
  });
  onUnmounted(() => {
    window.removeEventListener('resize', appHeight);
    window.removeEventListener('orientationchange', appHeight);
  });
};
