<script setup lang="ts">
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { reactive } from "vue";
import HistoryButtonList from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue";
import {
  StoredObject,
  StoredObjectVersionWithPointInTime,
} from "./../../../types";

interface HistoryButtonListConfig {
  versions: StoredObjectVersionWithPointInTime[];
  storedObject: StoredObject;
  canEdit: boolean;
}

const emit = defineEmits<{
  restoreVersion: [newVersion: StoredObjectVersionWithPointInTime];
}>();

interface HistoryButtonModalState {
  opened: boolean;
}

const props = defineProps<HistoryButtonListConfig>();
const state = reactive<HistoryButtonModalState>({ opened: false });

const open = () => {
  state.opened = true;
};

const onRestoreVersion = (payload: {
  newVersion: StoredObjectVersionWithPointInTime;
}) => emit("restoreVersion", payload);

defineExpose({ open });
</script>
<template>
  <Teleport to="body">
    <modal v-if="state.opened" @close="state.opened = false">
      <template v-slot:header>
        <h3>Historique des versions du document</h3>
      </template>
      <template v-slot:body>
        <p>Les versions sont conservées pendant 90 jours.</p>
        <history-button-list
          :versions="props.versions"
          :can-edit="canEdit"
          :stored-object="storedObject"
          @restore-version="onRestoreVersion"
        ></history-button-list>
      </template>
    </modal>
  </Teleport>
</template>

<style scoped lang="scss"></style>
