import { useTemplateRef, ref, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { onKeyStroke, onStartTyping, watchDebounced } from '@vueuse/core'

import { useMainStore } from '../store/main'

export const SearchInput = () => {
  const
    router = useRouter(),
    route = useRoute(),

    mainStore = useMainStore(),

    searchQuery = ref(route.query.q),
    searchInput = useTemplateRef<HTMLElement | null>('searchInput'),

    cancelListenerEsc = onKeyStroke(
      'Escape',
      (event) => {
        if (!searchInput.value) return
        event.preventDefault();

        if (searchInput.value !== document.activeElement) {
          if (route.name !== 'search') return;
          searchQuery.value = ''
          router.back()
        } else {
          searchInput.value.blur()
        }
      }
    ),
    cancelListenerCtrlK = onKeyStroke(
      e => e.key === 'k' && e.ctrlKey,
      (event) => {
        if (!searchInput.value) return

        event.preventDefault()
        searchInput.value.focus()
      }
    )

  onBeforeUnmount(() => {
    cancelListenerEsc()
    cancelListenerCtrlK()
  })

  onStartTyping(
    () => {
      if (!searchInput.value) return

      if (searchInput.value !== document.activeElement) {
        searchQuery.value = ''
        searchInput.value.focus()
      }
    }
  )

  watchDebounced(
    searchQuery,
    () => {
      const queryValue = searchQuery.value

      if (queryValue !== '') {
        router.push({
          name: 'search',
          replace: route.name === 'search',
          query: { q: queryValue },
        })
      } else {
        if (route.name !== 'search') return;
        router.back()
      }
    },
    { debounce: 500, maxWait: 1000 },
  )

  return vine`
    <div class="search">
      <button :class="{ invisible: !$route.meta.backButton }" @click="router.back()">
        <Icon icon="back" />
      </button>
      <input type="search" placeholder="Search" ref="searchInput" v-model.trim="searchQuery">
      <button :class="{ invisible: !mainStore.isLoading }" aria-busy="true" />
    </div>
  `
}