<template>
  <div class="country-container">
    <div class="country-search-container">
      <div>Find country to edit:</div>
      <div class="country-search-box-container">
        <autosuggest-searchbar
            :fetch-suggestions="query"
            flag-resolver="iso_code"
            placeholder="Search country..."
            no-results-text="no country found"
            variant="flags"
            title-resolver="name"
            subtitle-resolver="iso_code"
            :reset-on-select="true"
            @selected="selectCountry"
        ></autosuggest-searchbar>
      </div>
    </div>
    <div class="country-edit-container">
      <collapsible-box v-if="selectedCountry" :is-collapsable="false" variant="border"
                       :title="selectedCountry?.name ?? 'no country'">
        <div class="country-info-container">
          <box v-if="selectedCountry" class="country-info-box">
            <flag size="xl" :iso="selectedCountry.iso_code"></flag>
            <div class="country-info-text">
              <div class="country-info-text-caption">{{ selectedCountry.name }} ({{ selectedCountry.iso_code }})</div>
              <div class="country-info-text-subline">{{ selectedCountry.region_code }}</div>
            </div>

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

        </div>
      </collapsible-box>
      <div v-else>
        <div class="empty-country">

          <div class="empty-country-inner">
            No country selected.
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {mapStores} from "pinia";
import {useCountryStore} from "@/store/country.js";
import {usePropertySetsStore} from "@/store/propertySets.js";
import Flag from "@/components/UI/Flag.vue";
import Box from "@/components/UI/Box.vue";
import AutosuggestSearchbar from "@/components/UI/AutoSuggestSearchBar.vue";
import Property from "@/components/layout/config/Property.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Tooltip from "@/components/UI/Tooltip.vue";
import ModalDialog from "@/components/UI/ModalDialog.vue";
import Dropdown from "@/components/UI/Dropdown.vue";
import {usePropertiesStore} from "@/store/properties.js";
import CollapsibleBox from "@/components/UI/CollapsibleBox.vue";
import {buildDate} from "@/common.js";

export default {
  name: "CountryProperties",
  components: {CollapsibleBox, Dropdown, ModalDialog, Tooltip, IconButton, Property, AutosuggestSearchbar, Box, Flag},
  computed: {
    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;
    },
    loading() {
      return this.countryStore.isLoading;
    },
    ...mapStores(useCountryStore, usePropertySetsStore, usePropertiesStore),
    countries() {
      return this.countryStore.getCountries;
    },
    properties() {
      return this.countryStore.getSelectedCountry.properties;
    },
    isValidPeriodActive() {
      const state = this.propertySetsStore.getPeriodState(this.selectedPeriod);
      return state === "VALID" || state === "DRAFT";
    },
    selectedCountry() {
      return this.countryStore.getSelectedCountry;
    },
    selectedPeriodId() {
      return this.propertySetsStore.getSelectedPeriod;
    },
    selectedPeriod: {
      get() {
        return this.propertySetsStore.getSelectedPeriod
      },
      async set(value) {
        this.propertySetsStore.setSelectedPeriod(value);
        await this.countryStore.selectPeriod(value);
        await this.propertiesStore.loadProperties(value);
      }
    },
  },
  methods: {
    buildDate(date) {
      return buildDate(date, false);
    },
    async saveProperty(property) {
      this.countryStore.setProperty(property);

    },
    async query(query) {
      await this.countryStore.setQuery(query);
      return this.countryStore.getCountries;
    },
    async selectCountry(country) {
      this.countryStore.selectCountry(country.id);
    },
    async selectPeriod(periodId) {
      this.countryStore.selectPeriod(periodId);
    }
  }

}
</script>


<style scoped>

.empty-country {
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-country-inner {
  margin: 1.6rem 2.4rem;
  color: #6B869C;
  font-size: 1.6rem;
  font-weight: 500;
}

.country-info-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.4rem;
}

.country-info-text-caption {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.country-info-text-subline {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #6b7280;
}

.country-info-container {
  display: flex;
  justify-content: flex-start;
  gap: 1.6rem;
  margin: 3.2rem 0;
}

.country-info-box {
  min-width: 20rem;
  display: flex;
  flex-direction: row;
  gap: 3.6rem;
  padding: 2.4rem;
  align-items: center;
}

.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;
}

.country-container {
  display: flex;
  flex-direction: column;

  min-height: 50rem;

}

.country-search-container {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;

}

.country-search-box-container {
  flex: 1 1 auto;
}

.country-edit-container {
  padding-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-size: 1.4rem;
  flex: 1 1 auto;
}


</style>