import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faTimes,
  faSearch
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faTimes,
  faSearch
)

const SearchBar = {
  mounted () {
    window.addEventListener('keydown', this.autoFocus)
  },
  beforeDestroy () {
    window.removeEventListener('keydown', this.autoFocus)
  },
  data: () => ({
    searchTerm: undefined,
    hidden: true,
    error: false
  }),
  watch: {
    '$route': function (route) {
      if (route.name === 'search') {
        this.searchTerm = route.query.query
      }
    }
  },
  methods: {
    find (searchTerm) {
      this.$router.push({ name: 'search', query: { query: searchTerm } })
      this.$refs.searchInput.focus()
    },
    toggleHidden () {
      this.hidden = !this.hidden
      this.$emit('toggled', this.hidden)
      this.$nextTick(() => {
        if (!this.hidden) {
          this.searchTerm = undefined
          this.$refs.searchInput.focus()
        }
      })
    },
    autoFocus (event) {
      if (
        event.target.tagName !== 'BODY' ||
          event.altKey ||
          event.ctrlKey ||
          event.isComposing ||
          event.metaKey ||
          event.repeat ||
          event.shiftKey ||
          // not very vue-esque, but as long as it works
          document.querySelector('.modal-view.modal-background.open')
      ) {
        return
      }

      if (event.key === '/') {
        if (this.hidden) {
          this.toggleHidden()
        } else {
          this.$refs.searchInput.focus()
        }
        event.preventDefault()
      } else if (event.key === 'Escape') {
        if (!this.hidden) {
          this.toggleHidden()
        }
        event.preventDefault()
      }
    },
    blur () {
      this.$refs.searchInput.blur()
    }
  }
}

export default SearchBar