<template>
  <div class="vue-component">
    <h2>
      <a id="section-110" />
      {{ $t("confirm.title") }}
    </h2>
    <div>
      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])" />

      <div v-if="!isValidToBeConfirmed">
        <div class="alert alert-warning">
          {{ $t("confirm.alert_validation") }}
          <ul class="mt-2">
            <li v-for="k in validationKeys" :key="k">
              {{ $t(notValidMessages[k].msg) }}
              <a :href="notValidMessages[k].anchor">
                <i class="fa fa-level-up fa-fw" />
              </a>
            </li>
          </ul>
        </div>
        <ul class="record_actions">
          <li>
            <a class="btn btn-delete" :href="deleteLink">
              {{ $t("confirm.delete") }}
            </a>
          </li>
          <li>
            <button class="btn btn-save" disabled>
              {{ $t("confirm.ok") }}
            </button>
          </li>
        </ul>
      </div>

      <div v-else>
        <p v-html="$t('confirm.text_active', [$t('course.step.active')])" />
        <ul class="record_actions">
          <li>
            <a class="btn btn-delete" :href="deleteLink">
              {{ $t("confirm.delete") }}
            </a>
          </li>
          <li>
            <button class="btn btn-save" @click="modal.showModal = true">
              {{ $t("confirm.ok") }}
            </button>
          </li>
        </ul>
      </div>
    </div>

    <teleport to="body">
      <modal
        v-if="modal.showModal"
        :modal-dialog-class="modal.modalDialogClass"
        @close="modal.showModal = false"
      >
        <template #header>
          <h2 class="modal-title">
            {{ $t("confirm.sure") }}
          </h2>
        </template>
        <template #body>
          <p>{{ $t("confirm.sure_description") }}</p>
          <div v-if="accompanyingCourse.user === null">
            <div v-if="usersSuggestedFilteredByJob.length === 0">
              <p class="alert alert-warning">
                {{ $t("confirm.no_suggested_referrer") }}
              </p>
            </div>
            <div
              v-if="usersSuggestedFilteredByJob.length === 1"
              class="alert alert-info"
            >
              <p>{{ $t("confirm.one_suggested_referrer") }}:</p>
              <ul class="list-suggest add-items inline">
                <li>
                  <user-render-box-badge
                    :user="usersSuggestedFilteredByJob[0]"
                  />
                </li>
              </ul>
              <p>{{ $t("confirm.choose_suggested_referrer") }}</p>
              <ul class="record_actions">
                <li>
                  <button
                    class="btn btn-save mr-5"
                    @click="chooseSuggestedReferrer"
                  >
                    {{ $t("confirm.choose_button") }}
                  </button>
                </li>
                <li>
                  <button
                    class="btn btn-secondary"
                    @click="doNotChooseSuggestedReferrer"
                  >
                    {{ $t("confirm.do_not_choose_button") }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <template #footer>
          <button
            class="btn btn-save"
            :disabled="disableConfirm"
            @click="confirmCourse"
          >
            {{ $t("confirm.ok") }}
          </button>
        </template>
      </modal>
    </teleport>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";

export default {
  name: "Confirm",
  components: {
    Modal,
    UserRenderBoxBadge,
  },
  data() {
    return {
      modal: {
        showModal: false,
        modalDialogClass: "modal-dialog-centered modal-md",
      },
      notValidMessages: {
        participation: {
          msg: "confirm.participation_not_valid",
          anchor: "#section-10",
        },
        location: {
          msg: "confirm.location_not_valid",
          anchor: "#section-20",
        },
        origin: {
          msg: "confirm.origin_not_valid",
          anchor: "#section-30",
        },
        adminLocation: {
          msg: "confirm.adminLocation_not_valid",
          anchor: "#section-40",
        },
        socialIssue: {
          msg: "confirm.socialIssue_not_valid",
          anchor: "#section-60",
        },
        scopes: {
          msg: "confirm.set_a_scope",
          anchor: "#section-70",
        },
        job: {
          msg: "confirm.job_not_valid",
          anchor: "#section-80",
        },
      },
      clickedDoNotChooseReferrer: false,
    };
  },
  computed: {
    ...mapState({
      accompanyingCourse: (state) => state.accompanyingCourse,
    }),
    ...mapGetters([
      "isParticipationValid",
      "isSocialIssueValid",
      "isOriginValid",
      "isAdminLocationValid",
      "isLocationValid",
      "isJobValid",
      "validationKeys",
      "isValidToBeConfirmed",
      "usersSuggestedFilteredByJob",
    ]),
    deleteLink() {
      return `/fr/parcours/${this.accompanyingCourse.id}/delete`; //TODO locale
    },
    disableConfirm() {
      return (
        this.accompanyingCourse.user === null &&
        this.usersSuggestedFilteredByJob.length === 1 &&
        this.clickedDoNotChooseReferrer === false
      );
    },
  },
  methods: {
    confirmCourse() {
      this.$store
        .dispatch("confirmAccompanyingCourse")
        .catch(({ name, violations }) => {
          if (name === "ValidationException" || name === "AccessException") {
            violations.forEach((violation) =>
              this.$toast.open({ message: violation }),
            );
          } else {
            this.$toast.open({ message: "An error occurred" });
          }
        });
    },
    chooseSuggestedReferrer() {
      this.$store
        .dispatch("updateReferrer", this.usersSuggestedFilteredByJob[0])
        .catch(({ name, violations }) => {
          if (name === "ValidationException" || name === "AccessException") {
            violations.forEach((violation) =>
              this.$toast.open({ message: violation }),
            );
          } else {
            this.$toast.open({ message: "An error occurred" });
          }
        });
    },
    doNotChooseSuggestedReferrer() {
      this.clickedDoNotChooseReferrer = true;
    },
  },
};
</script>
