<template>
  <div class="container">
    <div><h3 class="sub-header">Prepare report</h3></div>
    <div class="search-bar-container">
      <div class="caption">Find material:</div>
      <div class="search-bar">
        <autosuggest-searchbar @selected="searchReport"
                               :fetch-suggestions="getMaterial"
                               placeholder="Select material for reporting"
                               title-resolver="part_number"
                               :initial-value="partNumber"
        ></autosuggest-searchbar>
      </div>
    </div>
    <div class="caption">Select suppliers to compare:</div>
    <div class="content-container" v-if="suppliers.length !== 0">
      <transition-group name="fade" tag="ul" class="item-list">
        <li class="item-list-element" v-for="supplier in suppliers" :key="supplier.is_user_node? 'u' : 'n'+ String(supplier.id)"
            @click="selectSupplier(supplier)">
          <supplier-item :id="String(supplier.id)"
                         :iso-code="supplier.country.iso_code"
                         :address="supplier.address"
                         :name="supplier.name"
                         :show-trash="false"
                         :is-user-supplier="supplier.isUserSupplier"
                         :selected="isSelected(supplier)"
          ></supplier-item>
        </li>
      </transition-group>
    </div>
    <div class="content-container-empty" v-else>no suppliers found.</div>
    <div class="footer">
      <basic-button :show-icon="false" @click="close('accept')" :disabled="!hasSelectedSuppliers">OK</basic-button>
      <basic-button :show-icon="false" variant="secondary" @click="close('discard')">Cancel</basic-button>
    </div>
  </div>
</template>


<script>

import AutosuggestSearchbar from "@/components/UI/AutoSuggestSearchBar.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import {mapStores} from "pinia";
import {useMaterialStore} from "@/store/material.js";
import {useReportSearchStore} from "@/store/reportSearch.js";
import SupplierItem from "@/components/layout/assistant/SupplierItem.vue";

export default {
  name: "SelectForReport",
  components: {SupplierItem, BasicButton, AutosuggestSearchbar},
  data() {
    return {
      selectedMaterialId: null,
    }
  },
  created() {
    this.reportSearchStore.reset();
  },
  computed: {
    ...mapStores(useMaterialStore, useReportSearchStore),
    suppliers() {
      return this.reportSearchStore.getSuppliers;
    },
    hasSelectedSuppliers() {
      return this.reportSearchStore.getSelectedSuppliers.length > 0;
    },
    partNumber() {
      return this.reportSearchStore.getMaterial?.part_number;
    }
  },
  methods: {
    close(action) {
      const suppliers = this.reportSearchStore.getSelectedSuppliers;
      this.$emit('close', {
        action: action,
        userSupplierIds: suppliers.filter(s => s.is_user_node).map(s => s.id),
        supplierIds: suppliers.filter(s => !s.is_user_node).map(s => s.id),
        materialId: this.selectedMaterialId});
    },
    isSelected(supplier) {
      return this.reportSearchStore.isSelected(supplier);
    },
    selectSupplier(supplier) {
      this.reportSearchStore.selectSupplier(supplier);
    },
    async getMaterial(query) {
      const materialQuery = {searchTerm: query};
      await this.materialStore.setQuery(materialQuery);
      return this.materialStore.materials;
    },
    async searchReport(material) {
      this.selectedMaterialId = material.id;
      this.reportSearchStore.setMaterial(material);
    }
  }
}
</script>


<style scoped>

.container {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 80vw;
  min-height: min(80vh, 100rem);
}

.search-bar-container {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.search-bar {
  flex: 1 0 auto;
}

.caption {
  font-size: 1.4rem;
  font-weight: 500;
}

.content-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Allow flex item to shrink below content size */
}

.content-container-empty {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Allow flex item to shrink below content size */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: #6B869C;
}

.footer {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  align-items: center;
  justify-content: flex-end;
}

.item-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 2.4rem 2.4rem;
  margin: 4.8rem;
  flex-wrap: wrap;
}

.item-list-element {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

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

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>