<template>
  <div>
    <template v-if="templates.length > 0">
      <slot name="title">
        <h2>{{ $t("generate_document") }}</h2>
      </slot>

      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <slot name="label">
              <label>{{ $t("select_a_template") }}</label>
            </slot>
          </div>
          <div class="col-md-8">
            <div class="input-group mb-3">
              <select class="form-select" v-model="template">
                <option disabled selected value="">
                  {{ $t("choose_a_template") }}
                </option>
                <template v-for="t in templates" :key="t.id">
                  <option :value="t.id">
                    {{ localizeString(t.name) || "Aucun nom défini" }}
                  </option>
                </template>
              </select>
              <a
                v-if="canGenerate"
                class="btn btn-update btn-sm change-icon"
                :href="buildUrlGenerate"
                @click.prevent="clickGenerate($event, buildUrlGenerate)"
                ><i class="fa fa-fw fa-cog"
              /></a>
              <a
                v-else
                class="btn btn-update btn-sm change-icon"
                href="#"
                disabled
                ><i class="fa fa-fw fa-cog"
              /></a>
            </div>
          </div>
        </div>
        <div class="row" v-if="hasDescription">
          <div class="col-md-8 align-self-end">
            <p>{{ getDescription }}</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { buildLink } from "ChillDocGeneratorAssets/lib/document-generator";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export default {
  name: "PickTemplate",
  props: {
    entityId: [String, Number],
    entityClass: {
      type: String,
      required: false,
    },
    templates: {
      type: Array,
      required: true,
    },
    preventDefaultMoveToGenerate: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  emits: ["goToGenerateDocument"],
  data() {
    return {
      template: null,
    };
  },
  computed: {
    canGenerate() {
      return this.template != null;
    },
    hasDescription() {
      if (this.template == null) {
        return false;
      }

      return true;
    },
    getDescription() {
      if (null === this.template) {
        return "";
      }
      let desc = this.templates.find((t) => t.id === this.template);
      if (null === desc) {
        return "";
      }
      return desc.description || "";
    },
    buildUrlGenerate() {
      if (null === this.template) {
        return "#";
      }

      return buildLink(this.template, this.entityId, this.entityClass);
    },
  },
  methods: {
    localizeString(str) {
      return localizeString(str);
    },
    clickGenerate(event, link) {
      if (!this.preventDefaultMoveToGenerate) {
        window.location.assign(link);
      }

      this.$emit("goToGenerateDocument", {
        event,
        link,
        template: this.template,
      });
    },
  },
  i18n: {
    messages: {
      fr: {
        generate_document: "Générer un document",
        select_a_template: "Choisir un modèle",
        choose_a_template: "Choisir",
      },
    },
  },
};
</script>

<style scoped></style>
