<template>
  <div class="container">
    <div class="search-bar-container">
      <autosuggest-searchbar class="search-bar"
                             placeholder="Add new Destination ..."
                             :fetch-suggestions="fetchDestinations"
                             :flag-resolver="resolveFlag"
                             @selected="addDestination"
                             subtitle-resolver="address"
                             variant="flags"
                             title-resolver="name"
                             :reset-on-select="true"></autosuggest-searchbar>
    </div>

    <!--    <div class="list-container">-->
    <transition-group name="list-item" class="list-container" tag="div" mode="out-in">

      <!-- Header -->
      <div class="destination-list-header" key="header">
        <div>Destination</div>
        <div>Annual quantity</div>
        <div>Selected route</div>
        <div>Action</div>
      </div>

      <div v-if="showDestinationsList">
        <destination-item v-for="destination in destinations" :key="destination.id"
                          :id="destination.id" :destination="destination" @delete="deleteDestination"
                          @edit="editDestination" class="list-item-wrapper"></destination-item>
      </div>
      <div v-else class="empty-container" key="empty">
        <span class="space-around">No Destinations found.</span>
      </div>

    </transition-group>
    <!--    </div>-->
    <modal :state="editDestinationModalState">
      <destination-edit @accept="editDestinationFinish(true)"
                        @discard="editDestinationFinish(false)"></destination-edit>
    </modal>
  </div>
</template>

<script>


import IconButton from "@/components/UI/IconButton.vue";
import AutosuggestSearchbar from "@/components/UI/AutoSuggestSearchBar.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import Spinner from "@/components/UI/Spinner.vue";
import Checkbox from "@/components/UI/Checkbox.vue";
import CalculationListItem from "@/components/layout/calculation/CalculationListItem.vue";
import DestinationItem from "@/components/layout/edit/destination/DestinationItem.vue";
import {mapStores} from "pinia";
import {useNodeStore} from "@/store/node.js";
import Modal from "@/components/UI/Modal.vue";
import DestinationEdit from "@/components/layout/edit/destination/DestinationEdit.vue";
import {usePremiseSingleEditStore} from "@/store/premiseSingleEdit.js";
import logger from "@/logger.js";
import {useDestinationSingleEditStore} from "@/store/destinationSingleEdit.js";

export default {
  name: "DestinationListView",
  components: {
    DestinationEdit,
    Modal,
    DestinationItem, CalculationListItem, Checkbox, Spinner, BasicButton, AutosuggestSearchbar, IconButton
  },
  data() {
    return {
      editDestinationModalState: false,
    }
  },
  computed: {
    ...mapStores(usePremiseSingleEditStore, useDestinationSingleEditStore, useNodeStore),
    destinations() {
      return this.premiseSingleEditStore.getDestinations;
    },
    showDestinationsList() {
      return this.destinations !== null && this.destinations.length > 0;
    }
  },
  methods: {
    async fetchDestinations(query) {
      await this.nodeStore.setSearch({searchTerm: query, nodeType: "DESTINATION", includeUserNode: false});
      return this.nodeStore.nodes;
    },
    resolveFlag(node) {
      return node.country.iso_code;
    },
    async addDestination(node) {
      logger.log(node)
      const [id] = await this.premiseSingleEditStore.addDestination(node);
      this.editDestination(id);
    },
    async deleteDestination(id) {
      this.premiseSingleEditStore.deleteDestination(id);
    },
    editDestination(id) {

      if (id) {
        const destination = this.premiseSingleEditStore.getDestinationById(id);
        logger.log(destination);
        this.destinationSingleEditStore.setDestination(destination);
        this.editDestinationModalState = true;
      }
    },
    async editDestinationFinish(save) {

      if (save) {

        const dest = this.premiseSingleEditStore.getDestinationById(this.destinationSingleEditStore.destination.id);

        logger.log("id", this.destinationSingleEditStore.destination.id, "dest", dest);
        this.destinationSingleEditStore.copyBack(dest);
        await this.premiseSingleEditStore.updateDestination(this.destinationSingleEditStore.destination.id)
      }

      this.editDestinationModalState = false;
    }
  }
}
</script>


<style scoped>

.space-around {
  margin: 3rem;
}

.container {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
  margin-top: 3rem;
  margin-bottom: 3rem;

}

.search-bar-container {

  margin: 3rem 3rem 0 3rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.6rem;
}

.search-bar {
  flex: 0 1 max(20rem, 40vw);
}

.list-container {
  overflow: hidden;
  gap: 1.6rem;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
}

.destination-list-header {
  display: grid;
  grid-template-columns: 2fr 2fr 5fr auto;
  gap: 1.6rem;
  padding: 2.4rem;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(107, 134, 156, 0.2);
  font-weight: 500;
  font-size: 1.2rem;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}


/* List Animation Styles

.list-item-wrapper {
  transition: all 0.3s ease;
}*/


/* Enter animations */

.list-item-enter-active {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.list-item-leave-active {
  transition: all 0.3s ease-out;
}


.list-item-enter-from {
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
}


.list-item-leave-to {
  opacity: 0;
  transform: translateX(20px) scale(0.95);

}


/* Move animation for when items shift position */

.list-item-move {
  transition: transform 0.3s ease;
}


/* Optional: Add a subtle hover animation for list items

.list-item-wrapper:hover {

  transform: translateY(-2px);

  box-shadow: 0 0.6rem 1.2rem -0.2rem rgba(0, 0, 0, 0.15);

}*/


/* Stagger animation for initial load */

.list-item-enter-active:nth-child(1) {
  transition-delay: 0ms;
}

.list-item-enter-active:nth-child(2) {
  transition-delay: 50ms;
}

.list-item-enter-active:nth-child(3) {
  transition-delay: 100ms;
}

.list-item-enter-active:nth-child(4) {
  transition-delay: 150ms;
}

.list-item-enter-active:nth-child(5) {
  transition-delay: 200ms;
}

.list-item-enter-active:nth-child(6) {
  transition-delay: 250ms;
}

.list-item-enter-active:nth-child(7) {
  transition-delay: 300ms;
}

.list-item-enter-active:nth-child(8) {
  transition-delay: 350ms;
}


/* Empty state animation */

.empty-container {
  animation: fadeInUp 0.5s ease-out;
}


@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* Responsive layout for viewports below 1500px */
@media (max-width: 1500px) {


  /* DestinationListView header alignment */
  .destination-list-header {
    grid-template-columns: 2fr 1fr 1fr auto;
  }
}

</style>