<script setup lang="ts">
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { computed, reactive } from "vue";

export interface DesktopEditButtonConfig {
  editLink: null;
  classes: Record<string, boolean>;
  expirationLink: number | Date;
}

interface DesktopEditButtonState {
  modalOpened: boolean;
}

const state: DesktopEditButtonState = reactive({ modalOpened: false });

const props = defineProps<DesktopEditButtonConfig>();

const buildCommand = computed<string>(
  () => "vnd.libreoffice.command:ofe|u|" + props.editLink,
);

const editionUntilFormatted = computed<string>(() => {
  let d;

  if (props.expirationLink instanceof Date) {
    d = props.expirationLink;
  } else {
    d = new Date(props.expirationLink * 1000);
  }
  console.log(props.expirationLink);

  return new Intl.DateTimeFormat(undefined, {
    dateStyle: "long",
    timeStyle: "medium",
  }).format(d);
});
</script>

<template>
  <teleport to="body">
    <modal v-if="state.modalOpened" @close="state.modalOpened = false">
      <template v-slot:body>
        <div class="desktop-edit">
          <p class="center">Veuillez enregistrer vos modifications avant le</p>
          <p>
            <strong>{{ editionUntilFormatted }}</strong>
          </p>

          <p>
            <a class="btn btn-primary" :href="buildCommand"
              >Ouvrir le document pour édition</a
            >
          </p>

          <p>
            <small
              >Le document peut être édité uniquement en utilisant Libre
              Office.</small
            >
          </p>

          <p>
            <small
              >En cas d'échec lors de l'enregistrement, sauver le document sur
              le poste de travail avant de le déposer à nouveau ici.</small
            >
          </p>

          <p>
            <small
              >Vous pouvez naviguez sur d'autres pages pendant l'édition.</small
            >
          </p>
        </div>
      </template>
    </modal>
  </teleport>
  <a :class="props.classes" @click="state.modalOpened = true">
    <i class="fa fa-desktop"></i>
    Éditer sur le bureau
  </a>
</template>

<style scoped lang="scss">
.desktop-edit {
  text-align: center;
}
i.fa::before {
  color: var(--bs-dropdown-link-hover-color);
}
</style>
