<template>
  <div class="destination-item-row">
    <div class="destination-item-name"><flag :iso="destinationIsoCode" />{{ destination.destination_node.name }}</div>
    <div class="destination-item-annual">{{ destination.annual_amount }}</div>
    <div class="destination-item-route" v-if="isD2d"><div class="d2d-routing-container"><PhShippingContainer /> D2D routing</div></div>
    <div class="destination-item-route" v-else-if="hasRoute"><destination-route :showBorder="false" :route="selectedRoute"></destination-route></div>
    <div class="destination-item-route" v-else><div class="d2d-routing-container"><PhEmpty /> No route selected</div></div>
    <div class="destination-item-action"><icon-button icon="pencil-simple" @click="$emit('edit', destination.id)"></icon-button><icon-button icon="trash" @click="$emit('delete',destination.id)"></icon-button></div>
  </div>
</template>

<script>

import {usePremiseEditStore} from "@/store/premiseEdit.js";
import {mapStores} from "pinia";
import DestinationRoute from "@/components/layout/edit/destination/DestinationRoute.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Flag from "@/components/UI/Flag.vue";
import {PhEmpty, PhShippingContainer} from "@phosphor-icons/vue";

export default {
  name: "DestinationItem",
  components: {PhEmpty, PhShippingContainer, Flag, IconButton, DestinationRoute},
  emits: ["delete", "edit"],
  props: {
    destination: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapStores(usePremiseEditStore),
    destinationIsoCode() {
      return this.destination.destination_node.country.iso_code;
    },
    hasRoute() {
      return this.destination.routes?.some(route => route.is_selected) | false;
    },
    isD2d() {
      return this.destination.is_d2d;
    },
    selectedRoute() {
      return this.destination.routes.find(route => route.is_selected);
    }
  },


}
</script>


<style scoped>

/* DestinationItem.vue styles */
.d2d-routing-container {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  gap: 0.8rem;
}

.destination-item-name {
  display: flex;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #001D33;
}

.destination-item-row {
  display: grid;
  grid-template-columns: 2fr 2fr 5fr auto;
  gap: 1.6rem;
  padding: 2.4rem;
  border-bottom: 0.16rem solid #f3f4f6;
  align-items: center;
  transition: background-color 0.2s ease;
  font-size: 1.4rem;
  color: #6b7280;
}

.destination-item-row:hover {
  background-color: rgba(107, 134, 156, 0.05);
}

.destination-item-action {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Responsive layout for viewports below 1500px */
@media (max-width: 1500px) {
  .destination-item-row {
    grid-template-columns: 2fr 1fr 1fr auto;
  }
}

</style>