import { onMounted, onUnmounted } from 'vue'
import { debounce } from 'lodash-es'
const breakpointMap: any = {
  xl: 1200
}
export default function (breakpoint: string, emit: any) {
  const resize = debounce(() => {
    const width = document.body.clientWidth
    if (width <= breakpointMap[breakpoint]) {
      emit('toggleCollapsed', true, 'resize')
    } else {
      emit('toggleCollapsed', false, 'resize')
    }
  }, 10)
  onMounted(() => {
    // resize()
    window.addEventListener('resize', resize)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', resize)
  })
}
