<!-- <template>
  <div class="search-bar">
    <div class="search-bar-input">
      <div class="search-bar-icon search-bar-search"></div>
      <input
        v-on:input="checkInput"
        id="header-search-input"
        placeholder="Search..."
      />
      <div class="search-bar-icon search-bar-close"></div>
    </div>
    <div v-if="loading" class="loading-container">
      <div class="loading-container-spinner"></div>
      <span class="loading-container-text">Loading results..</span>
    </div>
    <div
      class="search-result-container"
      v-if="typeof searchResults !== undefined && searchResults.length !== 0"
    >
      <span
        class="result-type-header no-results"
        v-if="typeof searchResults === 'string' || searchResults == []"
        >{{ searchResults }}</span
      >
      <template v-if="typeof searchResults !== 'string'">
        <span
          class="result-type-header"
          v-if="typeof products !== undefined && products.length !== 0"
          >Products</span
        >
        <template v-for="result in products">
          <searchResult
            :title="result.title"
            :link="result.link"
            :key="result.link"
          />
        </template>
        <span
          class="result-type-header"
          v-if="typeof blogs !== undefined && blogs.length !== 0"
          >Blogs</span
        >
        <template v-for="result in blogs">
          <searchResult
            :title="result.title"
            :link="result.link"
            :key="result.link"
          />
        </template>
        <span
          class="result-type-header"
          v-if="typeof pages !== undefined && pages.length !== 0"
          >Pages</span
        >
        <template v-for="result in pages">
          <searchResult
            :title="result.title"
            :link="result.link"
            :key="result.link"
          />
        </template>
      </template>
    </div>
  </div>
</template>
<script>
import _ from "lodash";
import searchResult from "./searchResult";
// let baseUrl = 'https://www.coopertires.com.au/wp-json/cooper/v1/';
let baseUrl =  "https://www.coopertires.com.au/wp-json/cooper/v1/";


export default {
  components: {
    searchResult: searchResult,
  },
  data: function () {
    return {
      loading: false,
      searchInput: "",
      searchResults: [],
    };
  },
  methods: {
    checkInput(e) {
      if (typeof e.target.value !== undefined && e.target.value.length >= 2) {
        this.searchResults = [];
        this.debounceInput(e);
      } else {
        this.searchResults = [];
      }
    },
    debounceInput: _.debounce(function (e) {
      this.searchInput = e.target.value;
    }, 1000),
  },
  computed: {
    products() {
      if (Array.isArray(this.searchResults)) {
        return this.searchResults.filter((x) => x.type === "product");
      }
    },
    pages() {
      if (Array.isArray(this.searchResults)) {
        return this.searchResults.filter((x) => x.type === "page");
      }
    },
    blogs() {
      if (Array.isArray(this.searchResults)) {
        return this.searchResults.filter((x) => x.type === "post");
      }
    },
  },
  watch: {
    searchInput: function () {
      this.loading = true;
      this.fetch = Promise.all([
        fetch(`${baseUrl}/search?searchTerm=${this.searchInput}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            accept: "application/json",
          },
        }).then((response) => {
          if (!response.ok) {
            throw new Error("HTTP status " + response.status);
          }
          return response.json();
        }),
      ]).then((results) => {
        this.loading = false;
        this.searchResults = results[0];
      });
    },
  },
};
</script> -->