<!--
This file is part of ArciveList.

# SPDX-FileCopyrightText: 2021 Hangar.org
# SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
  <nav class="">
    <form class="search"
          v-on:submit.prevent="search">
      <div class="input-group">
        <input type="text"
               name="fulltext_search"
               placeholder="Search"
               aria-label="Search"
               v-model="search_text"
               class="input-group-fieldbutton hollow" />
        <button class="appear button"
                type="submit">
          Search
        </button>
      </div>
    </form>
  </nav>
</template>

<script>
import axios from 'axios';
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: "Search",
  data() {
    return {
      search_text: "",
    };
  },
  methods: {
    search: function() {
      this.setSearchText(this.search_text)
      var local_search_result = this.searchLocalSiteData()
      var api_endpoint = '/api/collections/search?fulltext_search='
      var search_url = api_endpoint + this.search_text;
      var self = this;
      axios.get(search_url, {
      })
      .then(function (response) {
        //console.log(response.data)
        self.setFilteredSites(Object.assign({}, local_search_result, response.data))
        //self.setFilteredSites(response.data)
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    ...mapMutations([
      'setFilteredSites', 'setSearchText'
    ]),
    ...mapGetters([
      'searchLocalSiteData'
    ]),

  },
};
</script>

<style>

</style>
