import { ref } from 'vue'

const isCollapsed = ref(false)
const isCollapsedByToggle = ref(false)

function syncCollapsedFromDom() {
  if (typeof document === 'undefined') return
  const leftWindow = document.querySelector('uni-left-window')
  isCollapsed.value = leftWindow?.classList.contains('collapsed') ?? false
  isCollapsedByToggle.value = isCollapsed.value
}

function toggleLeftSidebar(isFromToggle = true) {
  isCollapsed.value = !isCollapsed.value
  if (isFromToggle) {
    isCollapsedByToggle.value = isCollapsed.value
  }
  const leftWindow = document.querySelector('uni-left-window')
  const content = document.querySelector('uni-content')
  if (!leftWindow || !content) return

  if (isCollapsed.value) {
    leftWindow.classList.add('collapsed')
    content.classList.add('collapsed')
  } else {
    leftWindow.classList.remove('collapsed')
    content.classList.remove('collapsed')
  }
}

export function useLeftSidebarCollapse() {
  return {
    isCollapsed,
    isCollapsedByToggle,
    toggleLeftSidebar,
    syncCollapsedFromDom,
  }
}