<template>
  <div class="nodes-container">

    <modal :state="showModal">
      <div class="node-modal-container">
        <div class="node-header">
          <h3 class="sub-header"> {{ node.name }}
          </h3>
          <icon-button icon="x" @click="showModal = false"></icon-button>
        </div>
        <div class="node-body">
          <div class="node-address"><flag :iso="node.country.iso_code" />{{ node.address }}</div>
          <div class="supplier-map" v-if="node.location">
            <open-street-map-embed :coordinates="node.location" :zoom="5" width="100%" height="300px"
                                   custom-filter="grayscale(0.8) sepia(0.5) hue-rotate(180deg) saturate(0.5) brightness(1.0)"></open-street-map-embed>
          </div>
        </div>
      </div>
    </modal>

    <table-view ref="tableViewRef" :data-source="fetch" :columns="nodeColumns" :page="pagination.page"
                :page-size="pageSize" :page-count="pagination.pageCount"
                :total-count="pagination.totalCount" @row-click="showDetails" :mouse-over="true"></table-view>

  </div>

</template>

<script>
import TableView from "@/components/UI/TableView.vue";
import {mapStores} from "pinia";
import {useNodeStore} from "@/store/node.js";
import Modal from "@/components/UI/Modal.vue";
import ErrorModal from "@/components/layout/error/ErrorModal.vue";
import TabContainer from "@/components/UI/TabContainer.vue";
import IconButton from "@/components/UI/IconButton.vue";
import OpenStreetMapEmbed from "@/components/UI/OpenStreetMapEmbed.vue";
import Flag from "@/components/UI/Flag.vue";

export default {
  name: "Nodes",
  props: {
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    async isSelected(newVal) {
      if(newVal === true) {
        await this.nodeStore.loadNodes();
      }
    }
  },
  components: {Flag, OpenStreetMapEmbed, IconButton, TabContainer, ErrorModal, Modal, TableView},
  computed: {
    ...mapStores(useNodeStore),
  },
  created() {
    this.nodeStore.loadNodes()
  },
  methods: {
    async fetch(query) {
      await this.nodeStore.setQuery(query);
      this.pagination = this.nodeStore.pagination;
      return this.nodeStore.nodes;
    },
    showDetails(node) {
      this.node = node;
      this.showModal = true;
    }
  },
  data() {
    return {
      showModal: false,
      node: null,
      nodeColumns: [
        {
          key: 'external_mapping_id',
          label: 'Mapping ID',
        },
        {
          key: 'name',
          label: 'Name',
        },
        {
          key: 'address',
          label: 'Address',
        },
        {
          key: 'country.iso_code',
          label: 'Country',
          showFlag: true
        },
        {
          key: 'types',
          label: 'Type',
          formatter: (value) => {
            return value.map(v => String(v).charAt(0).toUpperCase() + String(v).slice(1).toLowerCase()).join(', ');
          }
        },
        {
          key: 'is_deprecated',
          label: 'active',
          formatter: (value) => {
            return !value ? 'Yes' : 'No';
          }
        },
      ],
      pagination: {
        page: 1,
        pageCount: 1,
        totalCount: 0
      },
      pageSize: 20
    }
  }
}
</script>


<style scoped>

.nodes-container {
  padding: 2.4rem;
}


.node-modal-container {
  height: 40rem;
  width: 60rem;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Verhindert Overflow */
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Header soll nicht schrumpfen */
  padding-bottom: 1.6rem; /* Optional: etwas Abstand */
}

.node-body {
  flex: 1; /* Nimmt den restlichen Platz ein */
  min-height: 0; /* Wichtig für Flexbox-Scrolling */
  overflow: hidden; /* Container selbst soll nicht scrollen */
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.node-address {
  display: flex;
  gap: 0.8rem;

  color: #6b7280;
  font-size: 1.4rem;
  line-height: 1.4;
}

</style>