<template>
  <div>
    <transition name="fade">
      <div v-if="stagedChanges" class="staged-changes-container">
        <div class="staged-changes-info">
          <ph-warning size="18px"></ph-warning>
          There are changes to system properties or country properties. Press save icon to apply them.
        </div>
        <div class="staged-changes-save">
          <icon-button icon="floppy-disk" @click="applyChanges" variant="blue"></icon-button>
        </div>
      </div>
    </transition>
    <modal-dialog title="Do you really want to apply the current changes?" dismiss-text="No" accept-text="Yes"
                  :state="modalDialogStagedChangesState"
                  message='As soon as you change the system properties and country properties, new calculations are no longer comparable with previous calculations.
                    Therefore, a new "Property set" is created. Only calculations that were created with the same "Property set" can be compared within reporting. Would you like to continue?'
                  @click="applyChangesModalClick"
    >
    </modal-dialog>
  </div>
</template>

<script>

import IconButton from "@/components/UI/IconButton.vue";
import ModalDialog from "@/components/UI/ModalDialog.vue";
import {mapStores} from "pinia";
import {useStageStore} from "@/store/stage.js";
import {usePropertiesStore} from "@/store/properties.js";

export default {
  name: "StagedChanges",
  components: {ModalDialog, IconButton},
  data() {
    return {
      modalDialogStagedChangesState: false,

    }
  },
  computed: {
    ... mapStores(useStageStore, usePropertiesStore),
    stagedChanges() {
      return this.stageStore.hasStagedChanges;
    },
  },
  methods: {
    applyChanges() {
      this.modalDialogStagedChangesState = true;

    },
    async applyChangesModalClick(action) {
      this.modalDialogStagedChangesState = false;
      if (action === 'accept') {
        await this.stageStore.applyChanges();
        await this.propertiesStore.reload();
        await this.countryPropertiesStore.reload();
      }
    },
  },
  created() {
    this.stageStore.checkStagedChanges();
  }
}
</script>

<style scoped>

.staged-changes-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  gap: 1.6rem;
  background-color: #5AF0B4;
  color: #002F54;
  border-radius: 0.8rem;
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}

.staged-changes-info {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.staged-changes-save {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* Fade transition styles */
.fade-enter-active {
  transition: opacity 0.3s ease-in;
}

.fade-leave-active {
  transition: opacity 0.3s ease-out;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}
</style>