import { createSharedComposable } from '@vueuse/core'

function _useProState() {
  const route = useRoute()

  const isHeaderDialogOpen = ref(false)
  const isContentSearchModalOpen = ref(false)
  const isDashboardSidebarSliderOpen = ref(false)
  const isDashboardSearchModalOpen = ref(false)

  function toggleContentSearch() {
    if (isHeaderDialogOpen.value) {
      isHeaderDialogOpen.value = false

      setTimeout(() => {
        isContentSearchModalOpen.value = !isContentSearchModalOpen.value
      }, 0)

      return
    }

    isContentSearchModalOpen.value = !isContentSearchModalOpen.value
  }

  function toggleDashboardSearch() {
    if (isDashboardSidebarSliderOpen.value) {
      isDashboardSidebarSliderOpen.value = false

      setTimeout(() => {
        isDashboardSearchModalOpen.value = !isDashboardSearchModalOpen.value
      }, 200)

      return
    }

    isDashboardSearchModalOpen.value = !isDashboardSearchModalOpen.value
  }

  watch(
    () => route.path,
    () => {
      isDashboardSidebarSliderOpen.value = false
    },
  )

  return {
    isHeaderDialogOpen,
    isContentSearchModalOpen,
    isDashboardSidebarSliderOpen,
    isDashboardSearchModalOpen,
    toggleContentSearch,
    toggleDashboardSearch,
  }
}

export const useProState = createSharedComposable(_useProState)