import { useRoute, useRouter } from '@starpad/ui'
import { computed, watch, onUnmounted } from '@vue/composition-api'

export function useOpenSettings () {
  const route = useRoute()
  const router = useRouter()

  function openSettings (tab: string) {
    router.push({
      ...route.value,
      query: {
        ...route.value.query,
        userSettings: 'true',
        settingsTab: tab,
      },
    })
  }

  const settingsAreOpen = computed(() => !!route.value.query.userSettings)

  const cbs = []

  function onSettingsClose (cb) {
    cbs.push(cb)

    const off = () => {
      const index = cbs.indexOf(cb)
      if (index !== -1) cbs.splice(index, 1)
    }

    onUnmounted(() => {
      off()
    })

    return off
  }

  watch(settingsAreOpen, open => {
    if (!open) {
      cbs.forEach(cb => cb())
    }
  })

  return {
    openSettings,
    settingsAreOpen,
    onSettingsClose,
  }
}

export function useDisplaySettings () {
  const route = useRoute()
  const router = useRouter()

  const displaySettings = computed({
    get () {
      return route.value.query.userSettings
    },
    set (value) {
      router.push({
        ...route.value,
        query: {
          ...route.value.query,
          userSettings: value ? 'true' : undefined,
          ...!value ? { settingsTab: undefined } : {},
        },
      })
    },
  })

  return {
    displaySettings,
  }
}