<script setup lang="ts">
import { activeNotesSource, availableNotesSources } from '@/composables/useNotes'
import { preferredNotesSource } from '@/composables/useSettings'

const sourceLabels: { [source: string]: string } = {
  local: 'Switch to local notes',
  firebase: 'Switch to cloud notes'
}

const blur = () => (document.activeElement as HTMLElement)?.blur()

const handleClick = (fn: (...args: any[]) => any) => {
  blur()
  fn()
}
</script>
<template>
  <UIDropdownItem
    v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
    :key="source"
    @click="handleClick(() => (preferredNotesSource = source))"
  >
    <i class="fa-fw fa-solid fa-database" />
    {{ sourceLabels[source] }}
  </UIDropdownItem>
</template>
