const searchHeadApp = Vue.createApp({
    data() {
      return {
        solrHeadConfigUrl: '/chunk-fields/search-config?async=1',
        solrHeadAPISetting: null,
        searchHeadAutocompleteData: [],
        autoHeadCompleteDataObject: {},
        autoHeadCompleteInput: '',
        showHeadAutocompleteData: false,
        focusedItemHeadIndex: -1,
        autoHeadCompleteInput: ''
      }
    },
    async created() {
      await this.solrHeadConfig();
    },
    computed: {
      isInputInvalid() {
        const value = this.autoHeadCompleteInput;
        return value.includes('<script>') || value.includes('</script>');
      }
    },
    mounted() {
      document.addEventListener('click', (e) => {
        this.showHeadAutocompleteData = false
      });
    },
    beforeDestroy() {
      document.addEventListener('click', (e) => {
        this.showHeadAutocompleteData = true
      })
    },
    methods: {
      async solrHeadConfig() {
        try {
          const response = await fetch(this.solrHeadConfigUrl);
          if (!response.ok) {
            throw new Error(`Failed to fetch data from API. Status: ${response.status}`);
          }
          this.solrHeadAPISetting = await response.json();
        } catch (error) {
          console.error('Error getting Solr config:', error);
        }
      },
      async autocompleteRequestHead() {
        const formData = new URLSearchParams({
          Handler: 'autocomplete',
          Query: this.buildHeadAutocompleteParams()
        });
        try {
          const response = await fetch(this.solrHeadAPISetting.SolrGlobalConfig.APIURI, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: formData.toString()
          });
          const data = await response.json();
          this.searchHeadAutocompleteData = JSON.parse(data);
          const keyArray = this.searchHeadAutocompleteData.facet_counts.facet_fields.tnt_txt_en;
          let keyObj = {};
          for (let i = 0; i < keyArray.length; i += 2) {
            keyObj[keyArray[i]] = keyArray[i + 1];
          } 
          this.autoHeadCompleteDataObject = keyObj;
        } catch (error) {
          console.error('Error in autocomplete request:', error);
        }
      },
      buildHeadAutocompleteParams() {
        return JSON.stringify({
          'q': `(client:${this.solrHeadAPISetting.SolrGlobalConfig.CLIENT} AND (otplanguage:${this.solrHeadAPISetting.SolrOtpToolsSearchConfig.OTPLANGUAGE} OR language:${this.solrHeadAPISetting.SolrGlobalConfig.LANGUAGE}))`,
          "facet.prefix": this.autoHeadCompleteInput,
          "facet.method": "enum",
          "facet.limit": "10"
        });
      },
      async searchHeadButtonRequest() {
        const autoQueryValue = this.autoHeadCompleteInput;
        if (!this.isInputInvalid) {
          window.location.href = '/site-services/search-results?q=' + encodeURIComponent(autoQueryValue);
        }
      },
      //HANDLE ARROW KEY TO GO UP AND DOWN AFTER AUTO COMPLETE
      handleHeadArrowNavigation(e) {
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (this.focusedItemHeadIndex < Object.keys(this.autoHeadCompleteDataObject).length - 1) {
            this.focusedItemHeadIndex++;
          }
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (this.focusedItemHeadIndex > -1) {
            this.focusedItemHeadIndex--;
          }
        } else if (e.key === 'Enter' && this.focusedItemHeadIndex !== -1) {
          e.preventDefault();
          const keys = Object.keys(this.autoHeadCompleteDataObject);
          const selectedKey = keys[this.focusedItemHeadIndex];
          this.autoHeadCompleteInput = selectedKey;
          this.searchHeadButtonRequest();
        }
      },
      //SELECT ITEM BASED ON THE KEY EVENT
      selectHeadItem(key) {
        this.autoHeadCompleteInput = key;
        this.searchHeadButtonRequest();
      },
      async handleHeadAutocompleteKeyup() {
        if (this.autoHeadCompleteInput.length > 3) {
          this.showHeadAutocompleteData = true;
          await this.autocompleteRequestHead();
        }
      },
      fillHeadInput(event) {
        const autoValue = event.currentTarget.querySelector('.key').textContent;
        this.autoHeadCompleteInput = autoValue;
      },
      sanitizeHeadInput() {
        this.autoHeadCompleteInput = this.autoHeadCompleteInput.replace(/[^a-zA-Z0-9 ]/g, "");
      },
    }
  });
  const hvm = searchHeadApp.mount('#searchHeader');