<template>
  <div id="component">
    <div class="container is-flex is-align-items-center is-flex-direction-column">
      <div class="field">
        <div class="file is-info has-name">
          <label class="file-label">
            <input class="file-input" type="file" id="file" @change="processForm">
            <span class="file-cta">
              <span class="file-icon">
                <i class="fas fa-upload"></i>
              </span>
              <span class="file-label">
                Žaloba
              </span>
            </span>
          </label>
        </div>
      </div>
      <div>
        <label for="file">Nahrajte žalobu a nechte si ji zkontrolovat</label>
      </div>
      <div class="columns">
        <div id="content" class="column is-three-quarters"></div>
        <div class="column problems">
          <ICry v-for="(result, detection) in detections" v-bind:key="detection" class="icries" :title="translateCryTitle(detection)" v-bind:notthatmuch="Boolean(result)">
            {{ getDescription(detection) }}</ICry>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .court {
    background-color: #55acee;
  }
  .date_and_place {
    background-color: yellow;
  }

  .icries {
    margin-top: 1rem;
  }

  .problems {
    padding-top: 5rem;
  }
</style>

<style scoped>
  #content {
    margin-top: 5rem;
    overflow: auto;
  }

  #component {
    margin: 2rem;
    max-height: 100vh;
  }

  .columns {
    width: 100%;
  }
</style>

<script>
// @ is an alias to /src

import ICry from "../components/ICry";
export default {
  name: 'Upload',
  components: {ICry},
  props: {
    "detections": Array
  },
  methods: {
    processForm: function () {
      const formData = new FormData();
      formData.append("file", document.getElementById("file").files[0]);
      fetch("http://localhost:5000/validator", {method: "POST", body: formData})
      .then(response => response.json())
      .then(result => {
        this.detections = result.checks;

        const passed = Object.entries(result.checks).filter(([, val]) => {return val !== false}).map(([key, val]) => [val, key]).sort();

        const content = document.getElementById("content");
        content.innerHTML = "";
        let i = 0;
        for (const detection of passed) {
          const span1 = document.createElement("span");
          span1.innerText = result.parsed_content.slice(i,detection[0][0]);
          content.appendChild(span1);

          const titles = {
            "court": "Označení soudu",
            "date_and_place": "Datum a místo sepsání",
          };

          const span2 = document.createElement("span");
          span2.innerText = result.parsed_content.slice(detection[0][0], detection[0][1]);
          span2.classList.add(detection[1]);
          span2.title = titles[detection[1]];
          content.appendChild(span2);
          i = detection[0][1];
        }
        const span = document.createElement("span");
        span.innerText = result.parsed_content.slice(i);
        content.appendChild(span);
      })
      .catch(err => {
        console.error(err); //TODO
      })
    },
    translateCryTitle(cry) {
      return ({
        "accuser": "Žalobce",
        "court": "Soud",
        "date_and_place": "Datum a místo sepsání",
        "intent": "Záměr",
        "signature": "Podpis",
        "topic": "Čeho se domáháte",
      })[cry];
    },
    getDescription(cry) {
      return ({
        "accuser": "Kdo žalobu podává",
        "court": "Soud, který by měl vynést rozsudek",
        "date_and_place": "",
        "intent": "Čeho se snažíte dosáhnout",
        "signature": "Podpis žalobce, nebo jeho zástupce. Není nutný, pokud se podání činí některými formami elektronické komunikace, jako např. datovou schránkou",
        "topic": "Co je předmětem sporu",
      })[cry];
    },
  },
}
</script>
