<template>
  <div class="row mb-3">
    <h6>{{ trans(EVALUATION_DOCUMENT_ADD) }} :</h6>
    <pick-template
      entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
      :id="evaluation.id"
      :templates="templates"
      :preventDefaultMoveToGenerate="true"
      @go-to-generate-document="submitBeforeGenerate"
    >
      <template v-slot:title>
        <label class="col-form-label">{{
          trans(EVALUATION_GENERATE_A_DOCUMENT)
        }}</label>
      </template>
    </pick-template>
    <div>
      <label class="col-form-label">{{
        trans(EVALUATION_DOCUMENT_UPLOAD)
      }}</label>
      <ul class="record_actions document-upload">
        <li>
          <drop-file-modal
            :allow-remove="false"
            @add-document="emit('addDocument', $event)"
          ></drop-file-modal>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import PickTemplate from "ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue";
import DropFileModal from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileModal.vue";
import {
  EVALUATION_DOCUMENT_ADD,
  EVALUATION_DOCUMENT_UPLOAD,
  EVALUATION_GENERATE_A_DOCUMENT,
  trans,
} from "translator";
import { buildLink } from "ChillDocGeneratorAssets/lib/document-generator";
import { useStore } from "vuex";

const store = useStore();

const props = defineProps(["evaluation", "templates"]);
const emit = defineEmits(["addDocument"]);

async function submitBeforeGenerate({ template }) {
  const callback = (data) => {
    let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
      (e) => e.key === props.evaluation.key,
    ).id;

    window.location.assign(
      buildLink(
        template,
        evaluationId,
        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
      ),
    );
  };

  return store.dispatch("submit", callback).catch((e) => {
    console.log(e);
    throw e;
  });
}
</script>

<style scoped>
ul.document-upload {
  justify-content: flex-start;
}
</style>
