<template>
  <div class="cpTripLegRoutePlace" :class="classes">
    <div class="cpTripLegRoutePlace__pin">
      <cp-icon v-if="displayPinIcon" type="map-pin" />
    </div>
    <div class="cpTripLegRoutePlace__details">
      <cp-tooltip class="cpTripLegRoutePlace__timeTooltip" :content="dateFormatted">
        <time class="cpTripLegRoutePlace__time" :datetime="isoTime">
          <!-- eslint-disable-next-line -->
          <span>{{ formattedTime }}</span
          ><!-- remove unwanted white space --><sup v-if="plusOneDay">+{{ plusOneDay }}</sup>
        </time>
      </cp-tooltip>
      <h4 class="cpTripLegRoutePlace__city">{{ city }}</h4>
      <h5 class="cpTripLegRoutePlace__iata">{{ iata }}</h5>
      <span v-if="terminal" class="cpTripLegRoutePlace__terminal">
        <span class="cpTripLegRoutePlace__terminalIcon">T{{ terminal.terminal_code }}</span>
        <span class="cpTripLegRoutePlace__terminalLabel">{{ terminalLabel }}</span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
import type { FlightTerminal } from '@/constants/tripDetails/Terminal'
import type { TripDateTime } from '@/helpers/tripDetails'

import { FlightStopTypes } from '@/constants/tripDetails/FlightStopTypes'
import CpIcon from './CpIcon.vue'
import CpTooltip from './CpTooltip.vue'

interface Props {
  city: string
  config: CpTripDetailsConfig
  dayCountAfterArrival?: number
  dayCountAfterDeparture?: number
  iata: string
  terminal?: FlightTerminal
  time: TripDateTime
  type: FlightStopTypes
}

const props = withDefaults(defineProps<Props>(), {
  dayCountAfterArrival: 0,
  dayCountAfterDeparture: 0,
  terminal: undefined,
})

const displayPinIcon = computed(() => props.type === FlightStopTypes.DESTINATION)
const classes = computed(() => `cpTripLegRoutePlace--${props.type}`)
const dateFormatted = computed(() => props.time.toFormat('ccc, LLL d'))
const formattedTime = computed(() => props.time.toFormat('T'))
const terminalLabel = computed(() => props.terminal?.label || props.config.routePlace.terminalNotSpecified)
const plusOneDay = computed(() => props.dayCountAfterArrival || props.dayCountAfterDeparture)
const isoTime = computed(() => props.time.toISO() ?? '')
</script>

<style lang="scss">
.cpTripLegRoutePlace {
  position: relative;
  display: flex;

  &::before {
    position: absolute;
    width: fn.px-to-rem(24);
    background-image: url('@/assets/images/dot.svg');
    background-position: center center;
    background-repeat: repeat-y;
    background-size: var(--cp-spacing-sm);
    content: '';
    inset: 0;
  }

  &--layover:last-child::before {
    width: fn.px-to-rem(2);
    background-color: var(--cp-border-soft);
    inset: 0 fn.px-to-rem(11);
  }

  &--destination:last-child::before {
    content: none;
  }

  &__pin {
    position: relative;
    z-index: 1;
    display: flex;
    width: fn.px-to-rem(24);
    height: fn.px-to-rem(22); // Same value as __details line-height
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-right: var(--cp-spacing-lg);
    color: var(--cp-text-secondary); // Visual design, no design token needed

    > i {
      width: fn.px-to-rem(18);
      height: fn.px-to-rem(22);
    }

    &::before,
    &::after {
      background-color: var(--cp-background-primary);
      content: '';
    }

    &::before {
      position: absolute;
      z-index: -1;
      top: calc(#{var(--cp-spacing-xs)} * -1);
      left: 0;
      width: 100%;
      height: calc(100% + #{var(--cp-spacing-sm)});
    }
  }

  &--origin &__pin::after {
    width: fn.px-to-rem(10);
    border: max(1.5px, 0.08em) solid var(--cp-border-soft); // Visual design, no design token needed
    border-radius: fn.px-to-rem(1000);
    aspect-ratio: 1 / 1;
  }

  &--layover &__pin::after {
    width: fn.px-to-rem(4);
    height: fn.px-to-rem(4);
    border-radius: fn.px-to-rem(1000);
    background-color: var(--cp-text-secondary); // Visual design, no design token needed
  }

  &__details {
    line-height: fn.px-to-rem(22); // Same value as pin height
  }

  &__timeTooltip {
    display: inline-block;
    vertical-align: middle;
  }

  &__details > * {
    display: inline-block;
    vertical-align: middle;

    &:not(:first-child) {
      font-size: fn.px-to-em(14);
    }

    &:not(:last-child)::after {
      display: inline-block;
      margin: 0 var(--cp-spacing-md);
      color: currentColor;
      content: '•';
      font-size: fn.px-to-em(10);
      transform: translateY(-1px);
    }
  }

  :is(&__time, &__city) {
    font-weight: 500;
  }

  &__time {
    font-variant: tabular-nums;
  }

  &__iata {
    color: var(--cp-text-secondary);
    font-weight: normal;
  }

  &__terminal {
    color: var(--cp-text-secondary);
    line-height: fn.px-to-rem(12);

    > span {
      vertical-align: middle;
    }
  }

  &__terminalIcon {
    display: inline-block;
    min-width: fn.px-to-rem(16);
    min-height: fn.px-to-rem(16);
    padding: fn.px-to-rem(1) fn.px-to-rem(3);
    border: fn.px-to-rem(1.5) solid var(--cp-border-soft);
    border-radius: fn.px-to-rem(2);
    margin-right: var(--cp-spacing-md);
    font-size: fn.px-to-rem(9);
    text-align: center;
    vertical-align: middle;
  }
}
</style>
