<template>
  <div class="route-container" :style="{height: routeSectionScale + 'rem'}">
    <div class="route">
      <div class="route-section" v-for="section in sections" :key="section.id">
        <div class="route-section-line"></div>
        <div class="route-node">
          <div class="route-node-dot"></div>
          <div class="route-node-name">{{ section.from_node.external_mapping_id ?? section.from_node.name }}</div>
        </div>
        <div class="route-section-info">
          <div class="route-section-info-header">

            <ph-boat size="24" weight="fill" v-if="section.transport_type === 'SEA'"></ph-boat>
            <ph-train size="24" weight="fill" v-if="section.transport_type === 'RAIL'"></ph-train>
            <ph-truck size="24" weight="fill"
                      v-if="section.transport_type === 'ROAD' || section.transport_type === 'POST_RUN'"></ph-truck>

            <div>
              {{ section.from_node.external_mapping_id ?? section.from_node.name }} <PhArrowRight  :size="12" weight="bold" />
              {{ section.to_node.external_mapping_id ?? section.to_node.name }}
            </div>
          </div>
          <div class="route-section-info-text">
            <div class="route-section-info-text-header-cell">Calc. model</div><div class="route-section-info-text-data-cell">{{ section.rate_type === 'CONTAINER' ? 'Container rate' : section.rate_type === 'D2D' ? 'Door-2-door' : 'Kilometer rate' }}</div>
            <div class="route-section-info-text-header-cell">Transit time</div><div class="route-section-info-text-data-cell">{{ section.duration.total }} days</div>
            <div class="route-section-info-text-header-cell" v-if="section.rate_type === 'MATRIX'">Distance</div><div v-if="section.rate_type === 'MATRIX'" class="route-section-info-text-data-cell">{{ section.distance.total.toFixed(2) }} km</div>
            <div class="route-section-info-text-header-cell">Transport rate</div><div class="route-section-info-text-data-cell">{{ section.cost.total.toFixed(2) }} &euro;</div>
          </div>

        </div>
      </div>

      <div class="route-section">
        <div class="route-node">
          <div class="route-node-dot"></div>
          <div class="route-node-name">{{ destination.external_mapping_id ?? destination.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  PhArrowRight,
  PhBoat,
  PhCaretDoubleRight,
  PhCaretRight,
  PhTrain,
  PhTruck,
  PhTruckTrailer
} from "@phosphor-icons/vue";

export default {
  name: 'ReportRoute',
  components: {PhArrowRight, PhCaretDoubleRight, PhCaretRight, PhTruck, PhTruckTrailer, PhTrain, PhBoat},
  props: {
    routeSectionScale: {
      type: Number,
      default: 20
    },
    sections: {
      type: Array,
      required: true,
    },
    destination: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped>
.route-container {
  padding: 20px;
  height: 20rem
}

.route {
  position: relative;
  max-width: 200px;
}

.route-section {
  position: relative;
  display: flex;
  height: 3.8rem;
}

.route-section:last-child {
  position: relative;
  display: flex;
  height: 0;
}

.route-section-line {
  position: absolute;
  top: 1rem;
  left: 0;
  width: 0.4rem;
  height: max(100%, 4rem);
  background-color: #6B869C;
}

.route-section-info {
  position: absolute;
  left: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  z-index: 5000;
  background-color: #fff;
  border-radius: 0.8rem;
  border: 0.1rem solid #E3EDFF;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  padding: 1.6rem 2.4rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  min-width: 25rem;
}

.route-section-info-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:  0.6rem 0.8rem;
  font-size: 1.2rem;
  width: 100%;
  color: #6B869C;
  padding-left: 0.4rem;
}

.route-section-info-text-header-cell {
  text-wrap: nowrap;
}

.route-section-info-text-data-cell {
  text-align: right;
  text-wrap: nowrap;
}


.route-section-info-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  text-wrap: nowrap;
  color: #6B869C;
}

.route-section:hover .route-section-info {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.route-node {
  display: flex;
  gap: 0.8rem;
  top: 0;
  left: -0.4rem;
  align-items: center;
  position: absolute;
  font-size: 1.2rem;
  font-weight: 300;
  color: #6B869C;
  text-transform: uppercase;
}

.route-section:not(:last-child):hover .route-node-dot {
  background-color: #5AF0B4;
  transition: all 0.4s;
}

.route-section:not(:last-child):hover .route-section-line {
  background-color: #5AF0B4;
  transition: all 0.4s;
}

.route-section:not(:last-child):hover + .route-section .route-node-dot {
  background-color: #5AF0B4;
  transition: all 0.4s;
}

.route-node-dot {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #6B869C;
}

</style>