<template>
  <div class="cpTrip">
    <div class="cpTrip__content">
      <div class="cpTrip__routePoint">
        <time class="cpTrip__time" :datetime="trip.departureDate.raw">{{ trip.departureTime }}</time>
        <span class="cpTrip__iata">{{ trip.origin.iataCode }}</span>
      </div>
      <cp-trip-timeline
        :airlines="uniqueAirlines"
        :hide-airlines="hideAirlines"
        class="cpTrip__timeline"
        :flight-duration="trip.flightDuration.formatted"
        :has-self-transfer="trip.hasSelfTransfer"
        :labels="trip.labels"
        :stops="trip.stops"
      />
      <div class="cpTrip__routePoint">
        <time class="cpTrip__time" :datetime="trip.arrivalDate.raw">{{ trip.arrivalTime }}</time>
        <span class="cpTrip__iata">
          {{ trip.destination.iataCode }}
          <span v-if="trip.dayCountAfterDeparture" class="cpTrip__plus">+{{ trip.dayCountAfterDeparture }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

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

import CpTripTimeline from '@/components/CpTripTimeline.vue'

type Trip = {
  airlines: {
    iataCode: string
    name: string
  }[];
  arrivalDate: {
    formatted: string
    raw: string
  }
  arrivalTime: string
  dayCountAfterDeparture?: number
  departureDate: {
    formatted: string
    raw: string
  }
  departureTime: string
  destination: {
    iataCode: string
    name: string
  }
  flightDuration: {
    formatted: string
    raw: string
  }
  hasSelfTransfer?: boolean
  labels?: {
    layover?: string
    nonStop?: string
    stopCount?: string
    transfer?: string
  }
  origin: {
    iataCode: string
    name: string
  }
  stops?: {
    duration: string
    iata: string
    name: string
  }[]
}

interface Props {
  hideAirlines?: boolean
  trip: Trip
}

const props = defineProps<Props>()

const uniqueAirlines = computed(() => {
  const allAirlinesIataCodes = props.trip.airlines.map((airline) => airline.iataCode)
  const uniqueAirlineIatas: string[] = Array.from(new Set(allAirlinesIataCodes))

  const allUniqueAirlines = uniqueAirlineIatas.map((uniqueIataCode: string) => {
    return props.trip.airlines.find((airline) => airline.iataCode === uniqueIataCode)
  })

  return allUniqueAirlines as {
    iataCode: string
    name: string
  }[]
})
</script>

<style lang="scss">
.cpTrip {
  width: 100%;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__title {
    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-xs);
    font-weight: 600;
    line-height: var(--cp-line-height-xs);
    padding-block: var(--cp-spacing-sm);
    text-transform: uppercase;
  }

  &__content {
    display: flex;
    align-items: center;
    gap: var(--cp-spacing-2xl);
  }

  &__timeline {
    min-width: 0;
    flex: 1;
  }

  &__routePoint {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    &:last-child {
      align-items: flex-end;
    }
  }

  &__plus {
    position: absolute;
    top: fn.px-to-rem(-2);
    right: fn.px-to-rem(-12);
    color: var(--cp-text-error-primary);
    font-size: fn.px-to-rem(10);
    line-height: fn.px-to-rem(14);
  }

  &__time {
    font-size: var(--cp-text-size-xl);
    font-weight: 600;
    line-height: var(--cp-line-height-xl);
  }

  &__iata {
    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-md);
    font-weight: 500;
    line-height: var(--cp-line-height-md);
  }
}

@include mx.media-query-max(370px) {
  .cpTrip {
    &__content {
      gap: var(--cp-spacing-md);
    }
  }
}

@include mx.media-query-max(300px) {
  .cpTrip {
    &__content {
      justify-content: center;
      gap: var(--cp-spacing-sm);
    }

    &__time {
      font-size: var(--cp-text-size-lg);
      line-height: var(--cp-line-height-sm);
    }

    &__iata {
      font-size: var(--cp-text-size-sm);
      line-height: var(--cp-line-height-sm);
    }

    &__plus {
      font-size: fn.px-to-rem(8);
      line-height: fn.px-to-rem(10);
    }
  }
}
</style>
