<template>
  <div>
    <transition name="fade">
      <div v-if="showSelf" class="staged-changes-container">
        <div class="staged-changes-info">
          <ph-warning size="18px"></ph-warning>
          {{ message }}
        </div>
        <div class="staged-changes-save">
          <icon-button icon="floppy-disk" @click="applyChanges" variant="blue"></icon-button>
        </div>
      </div>
    </transition>
    <modal-dialog :title="modalTitle" dismiss-text="No" accept-text="Yes"
                  :state="modalDialogStagedChangesState"
                  :message="modalText"
                  @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 {usePropertiesStore} from "@/store/properties.js";
import {useStagedRatesStore} from "@/store/stagedRates.js";

export default {
  name: "StagedRates",
  components: {ModalDialog, IconButton},
  emits: ['ratesUpdate'],
  data() {
    return {
      modalDialogStagedChangesState: false,
    }
  },
  computed: {
    ...mapStores(useStagedRatesStore, usePropertiesStore),
    showSelf() {
      return this.stagedChanges || this.expiresSoon;
    },
    stagedChanges() {
      return this.stagedRatesStore.hasStagedChanges;
    },
    expiresSoon() {
      return this.stagedRatesStore.expiresSoon;
    },
    message() {
      if(this.stagedChanges)
        return "There are changes to kilometer rates and/or container rates. Please review them thoroughly and press save icon to apply them.";
      else
        return "The validity of the rates will expire soon. Please upload new rates or extend the validity of the current rates by clicking the save icon.";
    },
    modalTitle() {
      if(this.stagedChanges)
        return "Do you really want to apply the current changes?";
      else
        return "Do you really want to extend the validity of the current rates?";
    },
    modalText() {
      if(this.stagedChanges)
        return "As soon as you change the kilometer rates or container rates, new calculations are no longer comparable with previous calculations. " +
               "Therefore, a new \"validity period\" is created. Only calculations that were created with the same \"validity period\" can be compared within reporting. Would you like to continue?";
      else
        return "The accuracy of logistics calculations can only be ensured if transportation costs are regularly updated to the correct values. You should only extend the validity period if transportation costs have not changed. " +
               "Do you want to extend the validity of the current rates?";
    }
  },
  methods: {
    applyChanges() {
      this.modalDialogStagedChangesState = true;
    },
    async applyChangesModalClick(action) {
      this.modalDialogStagedChangesState = false;
      if (action === 'accept') {
        await this.stagedRatesStore.applyChanges();
        this.$emit('ratesUpdate');
      }
    },
    checkChanges() {
      this.stagedRatesStore.checkStagedChanges();
    }
  },
  created() {
    this.checkChanges();
  }
}
</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>