<template>
  <div class="destination-route-container" @click="$emit('click')">
    <div :class="containerClass">
      <ph-boat :size="18" v-if="isSea" class="destination-route-icon"></ph-boat>
      <ph-train :size="18" v-else-if="isRail" class="destination-route-icon"></ph-train>
      <ph-truck :size="18" v-else-if="isRoad" class="destination-route-icon"></ph-truck>
      <ph-navigation-arrow :size="18" v-else class="destination-route-icon"></ph-navigation-arrow>
      <div :class="{ 'route-details': true, 'no-responsive': !responsive }">
        <span v-for="element in routeElements" class="destination-route-element"> {{ element }} </span>
      </div>
      <!--      <basic-badge v-if="cheapest" variant="secondary">CHEAPEST</basic-badge>-->
      <!--      <basic-badge v-if="fastest" variant="primary">FASTEST</basic-badge>-->
    </div>

  </div>
</template>

<script>


import {
  PhBoat,
  PhHandCoins,
  PhLightning,
  PhNavigationArrow,
  PhTrain,
  PhTruck,
  PhTruckTrailer
} from "@phosphor-icons/vue";
import BasicBadge from "@/components/UI/BasicBadge.vue";

export default {
  name: "DestinationRoute",
  components: {PhTruck, BasicBadge, PhLightning, PhHandCoins, PhNavigationArrow, PhTrain, PhTruckTrailer, PhBoat},
  props: {
    route: {
      type: Object,
      required: true
    },
    showBorder: {
      type: Boolean,
      required: false,
      default: true
    },
    selected: {
      type: Boolean,
      required: false,
      default: false
    },
    responsive: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  computed: {
    cheapest() {
      return this.route.is_cheapest;
    },
    fastest() {
      return this.route.is_fastest;
    },
    routeElements() {
      const routeElem = this.route.transit_nodes.map(n => n.external_mapping_id.replace("_", " "));
      return routeElem;
    },
    isSea() {
      return this.route.type === "SEA";
    },
    isRoad() {
      return this.route.type === "ROAD";
    },
    isRail() {
      return this.route.type === "RAIL";
    },
    containerClass() {

      let classes = ['destination-route-inner-container'];

      if(this.showBorder) {
        classes.push('destination-route-inner-container--bordered')
      }

      if(this.selected && this.showBorder) {
        classes.push('destination-route-inner-container--selected')
      }

      return classes.join(' ');
    }
  }
}
</script>

<style scoped>
.destination-route-inner-container {
  display: flex;
  color: #6B869C;
  background: transparent;
  border-radius: 0.8rem;
  padding: 0.6rem 1.2rem;
  transition: all 0.1s ease;
  flex: 0 1 fit-content;
  gap: 0.8rem;
  align-items: center;
}

.destination-route-container {
  display: flex;
  align-items: center;
}

.destination-route-inner-container--bordered {
  border: 0.2rem solid #E3EDFF;
  color: #6B869C;
}

.destination-route-inner-container--selected {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
}

.destination-route-inner-container--bordered:hover {
  background: #EEF4FF;
  color: #6B869C;
  border: 0.2rem solid #8DB3FE;
  cursor: pointer;
}

.destination-route-icon {
  margin-right: 0.8rem;
}

.destination-route-element {
  font-size: 1.4rem;
}

.destination-route-element:not(:last-child)::after {
  content: ">";
  font-size: 1.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

/* Hide route details below 1500px, show only icon */
@media (max-width: 1500px) {
  .destination-route-icon {
    margin-right: 0;
  }

  .destination-route-inner-container > div:not(.no-responsive) {
    display: none;
  }

  .destination-route-inner-container .basic-badge {
    display: none;
  }
}

/* When responsive is disabled, always show content */
.no-responsive {
  display: block !important;
}

.no-responsive ~ .destination-route-icon {
  margin-right: 0.8rem !important;
}

</style>