<template>
  <div>
    <a id="evaluations"></a>
    <div class="item-title" :title="evaluation.id || 'no id yet'">
      <span>{{ localizeString(evaluation.evaluation.title) }}</span>
    </div>

    <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
      <i class="fa fa-link fa-lg"></i>
      <a :href="evaluation.evaluation.url" target="_blank">{{
        evaluation.evaluation.url
      }}</a>
    </div>

    <div>
      <form-evaluation
        ref="FormEvaluation"
        :key="evaluation.key"
        :evaluation="evaluation"
        :docAnchorId="docAnchorId"
      ></form-evaluation>

      <ul class="record_actions">
        <li v-if="evaluation.workflows_availables.length > 0">
          <list-workflow-modal
            :workflows="evaluation.workflows"
            :allowCreate="true"
            relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
            :relatedEntityId="evaluation.id"
            :workflowsAvailables="evaluation.workflows_availables"
            @go-to-generate-workflow="goToGenerateWorkflow"
          ></list-workflow-modal>
        </li>
        <li v-if="canDelete">
          <a
            class="btn btn-delete"
            @click="modal.showModal = true"
            :title="$t('action.delete')"
            >{{ $t("delete_evaluation") }}</a
          >
        </li>
      </ul>
    </div>

    <teleport to="body">
      <modal
        v-if="modal.showModal"
        :modalDialogClass="modal.modalDialogClass"
        @close="modal.showModal = false"
      >
        <template v-slot:header>
          <h2 class="modal-title">{{ $t("delete.sure") }}</h2>
        </template>
        <template v-slot:body>
          <p>{{ $t("delete.sure_description") }}</p>
        </template>
        <template v-slot:footer>
          <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
            {{ $t("delete.ok") }}
          </button>
        </template>
      </modal>
    </teleport>
  </div>
</template>

<script>
import FormEvaluation from "./FormEvaluation.vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import ListWorkflowModal from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue";
import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

const i18n = {
  messages: {
    fr: {
      no_evaluation_associated: "Aucune évaluation associée",
      add_an_evaluation: "Évaluations disponibles",
      evaluation_has_no_evaluation: "Aucune évaluation disponible",
      startDate: "Date d'ouverture",
      endDate: "Date de fin",
      maxDate: "Date d'échéance",
      warningInterval: "Rappel (jours)",
      comment: "Note publique",
      documents: "Documents",
      delete: {
        sure: "Êtes-vous sûr?",
        sure_description:
          "Cette évaluation sera supprimée de cette action d'accompagnement",
        ok: "Supprimer",
      },
      delete_evaluation: "Supprimer l'évaluation",
    },
  },
};

export default {
  name: "AddEvaluation",
  components: {
    FormEvaluation,
    Modal,
    ListWorkflowModal,
  },
  props: ["evaluation", "docAnchorId"],
  i18n,
  data() {
    return {
      modal: {
        showModal: false,
        modalDialogClass: "modal-dialog-centered modal-md",
      },
    };
  },
  computed: {
    pickedEvaluations() {
      return this.$store.state.evaluationsPicked;
    },
    canDelete() {
      if (this.evaluation.workflows.length > 0) {
        return false;
      }

      for (let doc of this.evaluation.documents) {
        if (doc.workflows.length > 0) {
          return false;
        }
      }

      return true;
    },
  },
  methods: {
    localizeString,
    removeEvaluation(e) {
      this.$store.commit("removeEvaluation", e);
      return;
    },
    toggleEditEvaluation() {
      this.$store.commit("toggleEvaluationEdit", {
        key: this.evaluation.key,
      });
    },
    submitForm() {
      this.toggleEditEvaluation();
    },
    goToGenerateWorkflow({ workflowName }) {
      const callback = (data) => {
        let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
          (e) => e.key === this.evaluation.key,
        ).id;
        window.location.assign(
          buildLinkCreate(
            workflowName,
            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
            evaluationId,
          ),
        );
      };

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

<style lang="scss" scoped>
div.item-title {
  .evaluation-title {
    cursor: default;
    &::before {
      content: "";
    }
  }
}
div.item-url {
  i {
    color: unset !important;
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
}
</style>
