<template>
  Hello world: {{ title }}

  <div v-for="hit in this.hits" class="mt-3">
    <div><strong>{{ hit.title }}</strong> ({{ hit.wordcount }} words)</div>
    <div v-html="hit.snippet"></div>
    <table v-html="hit.diff"></table>
    <div>replacement: {{ hit.replacement }}</div>
  </div>
</template>

<script>
import axios from "redaxios";

export default {
  props: {
    title: String,
    api_base_url: String,
  },
  data() {
    return {
      hits: [],
    };
  },
  computed: {
  },
  watch: {
  },
  methods: {
    api_call(endpoint, options) {
      var url = `${this.api_base_url}/${endpoint}`;
      return axios.get(url, options).catch(this.show_api_error_modal);
    },
    add_hit(hit) {
      var params = { link_from: hit.title, link_to: this.title };
      this.api_call("valid_hit", { params: params}).then((response) => {
        if (response.data.valid) {
          hit.diff = response.data.diff
          hit.replacement = response.data.replacement
          this.hits.push(hit);
        }
      });
    }
  },
  mounted() {
    var params = { title: this.title }
    this.api_call("hits", { params: params}).then((response) => {
      response.data.hits.forEach((hit) => { this.add_hit(hit) });
    });
  }
};
</script>

<style>
</style>
