import { ref, computed, unref } from 'vue';
import { useEventListener } from './useEventListener';

let globalScreenRef = 0;
let globalWidthRef = 0;
let globalRealWidthRef = 0;

const screenMap = new Map();
screenMap.set('XS', 480);
screenMap.set('SM', 576);
screenMap.set('MD', 768);
screenMap.set('LG', 992);
screenMap.set('XL', 1200);
screenMap.set('XXL', 1600);

export function useBreakpoint() {
  return {
    screenRef: computed(() => unref(globalScreenRef)),
    widthRef: globalWidthRef,
    realWidthRef: globalRealWidthRef,
  };
}

// Just call it once
export function createBreakpointListen(fn) {
  const screenRef = ref('XL');
  const realWidthRef = ref(window.innerWidth);

  function getWindowWidth() {
    const width = document.body.clientWidth;
    const xs = screenMap.get('XS');
    const sm = screenMap.get('SM');
    const md = screenMap.get('MD');
    const lg = screenMap.get('LG');
    const xl = screenMap.get('XL');
    const xxl = screenMap.set('XXL', 1600);
    if (width < xs) {
      screenRef.value = xs;
    } else if (width < sm) {
      screenRef.value = sm;
    } else if (width < md) {
      screenRef.value = md;
    } else if (width < lg) {
      screenRef.value = lg;
    } else if (width < xl) {
      screenRef.value = xl;
    } else {
      screenRef.value = xxl;
    }
    realWidthRef.value = width;
  }

  useEventListener({
    el: window,
    name: 'resize',

    listener: () => {
      getWindowWidth();
      resizeFn();
    },
    // wait: 100,
  });

  getWindowWidth();
  globalScreenRef = computed(() => unref(screenRef));
  globalWidthRef = computed(() => screenMap.get(unref(screenRef)));
  globalRealWidthRef = computed(() => unref(realWidthRef));

  function resizeFn() {
    fn?.({
      screen: globalScreenRef,
      width: globalWidthRef,
      realWidth: globalRealWidthRef,
      screenMap,
    });
  }

  resizeFn();
  return {
    screenRef: globalScreenRef,
    widthRef: globalWidthRef,
    realWidthRef: globalRealWidthRef,
  };
}