<template>
  <div class="properties-container">
    <staged-changes></staged-changes>
    <div v-if="!loading" class="period-select-container">
      <span class="period-select-caption">Property set:</span>
      <dropdown :options="periods"
                emptyText="No property set available"
                class="period-select"
                placeholder="Select a property set"
                v-model="selectedPeriod"
      ></dropdown>
      <tooltip position="left" text="Invalidate the selected property set">
        <icon-button icon="trash" @click="deletePeriod" :disabled="disableDeleteButton"></icon-button>
      </tooltip>
      <modal-dialog title="Do you really want to invalidate this property set?"
                    dismiss-text="No"
                    accept-text="Yes"
                    :state="modalDialogDeleteState"
                    message="If you invalidate this property set, this will also invalidate all calculations done with this property set. This cannot be undone!"
                    @click="deleteModalClick"
      >
      </modal-dialog>
    </div>

    <transition name="properties-fade" mode="out-in">
      <div v-if="!loading" class="properties-list" :key="selectedPeriod">
        <transition-group name="property-item" tag="div">
          <property v-for="property in properties"
                    :key="`${selectedPeriod}-${property.external_mapping_id}`"
                    :property="property"
                    :disabled="!isValidPeriodActive"
                    @save="saveProperty"></property>
        </transition-group>
      </div>
    </transition>

    <country-properties v-if="!loading"></country-properties>


  </div>
</template>

<script>
import {mapStores} from "pinia";
import {usePropertiesStore} from "@/store/properties.js";
import Property from "@/components/layout/config/Property.vue";
import Dropdown from "@/components/UI/Dropdown.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Tooltip from "@/components/UI/Tooltip.vue";
import ModalDialog from "@/components/UI/ModalDialog.vue";
import NotificationBar from "@/components/UI/NotificationBar.vue";
import {usePropertySetsStore} from "@/store/propertySets.js";
import {useCountryStore} from "@/store/country.js";
import CountryProperties from "@/components/layout/config/CountryProperties.vue";
import Box from "@/components/UI/Box.vue";
import StagedChanges from "@/components/layout/config/StagedChanges.vue";
import {buildDate} from "@/common.js";

export default {
  name: "Properties",
  components: {
    StagedChanges,
    Box,
    CountryProperties, NotificationBar, ModalDialog, Tooltip, IconButton, BasicButton, Dropdown, Property
  },
  data() {
    return {
      modalDialogDeleteState: false,
      selectedPeriodId: null
    }
  },
  computed: {
    ...mapStores(usePropertiesStore, usePropertySetsStore, useCountryStore),
    loading() {
      return this.propertiesStore.isLoading;
    },
    isValidPeriodActive() {
      const state = this.propertySetsStore.getPeriodState(this.selectedPeriod);
      return state === "VALID" || state === "DRAFT";
    },
    disableDeleteButton() {
      const state = this.propertySetsStore.getPeriodState(this.selectedPeriod);
      return state === "VALID" || state === "INVALID" || state === "DRAFT";
    },
    selectedPeriod: {
      get() {
        return this.propertySetsStore.getSelectedPeriod
      },
      async set(value) {
        this.propertySetsStore.setSelectedPeriod(value);
        await this.propertiesStore.loadProperties(value);
        await this.countryStore.selectPeriod(value);
      }
    },
    properties() {
      return this.propertiesStore.getProperties;
    },
    periods() {
      const periods = [];

      const ps = this.propertySetsStore.getPeriods;
      const current = this.propertySetsStore.getCurrentPeriodId;

      if ((ps ?? null) === null) {
        return null;
      }

      for (const p of ps) {
        const value = (p.state === "DRAFT" || p.state === "VALID") ? "CURRENT" : `${this.buildDate(p.start_date)} - ${this.buildDate(p.end_date)} ${p.state === "INVALID" ? "(INVALID)" : ""}`;
        const period = {id: p.id, value: value};

        if (p.state !== "VALID" || p.id === current)
          periods.push(period);
      }

      return periods;
    }
  },
  created() {
    this.propertiesStore.reload();
  },
  methods: {
    saveProperty(property) {
      this.propertiesStore.setProperty(property);
    },
    buildDate(date) {
      return buildDate(date, false);
    },
    deletePeriod() {
      if (!this.disableDeleteButton) {
        this.modalDialogDeleteState = true;
      }
    },
    deleteModalClick(action) {
      this.modalDialogDeleteState = false;

      if (action === 'accept')
        this.propertySetsStore.invalidate();
    }
  }
}
</script>

<style scoped>
.period-select-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1.6rem;
  font-size: 1.4rem;
}

.period-select {
  flex: 0 1 40rem
}

.period-select-caption {
  font-weight: 500;
}

.properties-list {
  position: relative;
  min-height: 100px;
  width: fit-content;
}

.properties-container {
  padding: 2.4rem;
}

.property-item-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.property-item-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* Prevent layout jumping during leave transition */
.property-item-leave-active {
  position: absolute;
  width: 100%;
}

/* Smooth repositioning of remaining items */
.property-item-move {
  transition: transform 0.3s ease;
}
</style>