<template>
  <div class="cpTripTimeline">
    <div class="cpTripTimeline__information">
      <div class="cpTripTimeline__dotWrapper">
        <span class="cpTripTimeline__dot" />
      </div>
      <cp-badge :size="badgeDynamicSize">
        {{ flightDuration }}
      </cp-badge>
      <cp-tooltip v-if="!hideAirlines" allow-outside-container color="neutral">
        <div class="cpTripTimeline__airlines">
          <div
            v-for="(airline, index) in firstAirlines"
            :key="airline.iataCode"
            class="cpTripTimeline__airlineLogo"
          >
            <span v-if="displayRemainingAirlinesCount(index)" class="cpTripTimeline__remaining">+{{ remainingAirlinesCount }}</span>
            <cp-airline-logo v-else :iata-code="airline.iataCode" :size="logoDynamicSize" />
          </div>
        </div>
        <template #content>
          <ul class="cpTripTimeline__airlinesList">
            <li v-for="airline in airlines" :key="airline.iataCode">{{ airline.name }}</li>
          </ul>
        </template>
      </cp-tooltip>
      <div class="cpTripTimeline__dotWrapper">
        <span class="cpTripTimeline__dot" />
      </div>
    </div>
    <cp-tooltip class="cpTripTimeline__tooltip" :disabled="!hasStops" allow-outside-container color="neutral">
      <p class="cpTripTimeline__summary">
        <template v-if="hasStops">
          <span class="cpTripTimeline__stop">{{ stopLabel }}</span>
          <span v-if="hasSelfTransfer" class="cpTripTimeline__transfer">
            {{ transferLabel }}
          </span>
          <span>{{ formattedStops }}</span>
        </template>
        <span v-else>{{ nonStopLabel }}</span>
      </p>
      <template #content>
        <ul class="cpTripTimeline__stops">
          <li v-for="stop in stops" :key="stop.iata">
            {{ stop.duration }} {{ layoverLabel }} •
            <template v-if="stop.selfTransferLabel">
              {{ stop.selfTransferLabel }}
            </template>
            <template v-else> {{ stop.name }} ({{ stop.iata }})</template>

            <hr />
          </li>
        </ul>
      </template>
    </cp-tooltip>
  </div>
</template>

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

import { useDynamicSize } from '@/composables/useDynamicSize'

interface Props {
  airlines: {
    iataCode: string;
    name: string;
  }[];
  flightDuration: string;
  hasSelfTransfer?: boolean;
  hideAirlines?: boolean;
  labels?: {
    layover?: string;
    nonStop?: string;
    stopCount?: string;
    transfer?: string;
  };
  stops?: {
    duration: string;
    iata: string;
    name: string;
    selfTransferLabel?: string;
  }[];
}

const props = defineProps<Props>()

const stopLabel = computed(() => props.labels?.stopCount)
const layoverLabel = computed(() => props.labels?.layover)
const nonStopLabel = computed(() => props.labels?.nonStop)
const transferLabel = computed(() => props.labels?.transfer)

const badgeDynamicSize = useDynamicSize({ default: 'sm', 300: 'xs' })
const logoDynamicSize = useDynamicSize({ default: 24, 300: 20 })

const hasStops = computed(() => !!props.stops?.length)

const AIRLINES_LIMIT = 3
const firstAirlines = computed(() => props.airlines.slice(0, AIRLINES_LIMIT))
const hasMoreAirlinesThanLimit = computed(() => props.airlines.length > (AIRLINES_LIMIT + 1))

const formattedStops = computed(() => {
  if (!hasStops.value) return ''
  return props.stops!.map(({ name }) => name).join(', ')
})

const remainingAirlinesCount = computed(() => props.airlines.length - firstAirlines.value.length)

const displayRemainingAirlinesCount = (index: number) => {
  const isLastItem = index === firstAirlines.value.length - 1
  return hasMoreAirlinesThanLimit.value && isLastItem
}
</script>

<style lang="scss">
.cpTripTimeline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  &__information {
    display: flex;
    overflow: hidden;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--cp-spacing-md);
    padding-block: fn.px-to-rem(3);

    &::before,
    &::after {
      display: block;
      width: 100%;
      min-width: 0;
      height: fn.px-to-rem(2);
      flex: 1 1 fn.px-to-rem(32);
      border-radius: var(--cp-radius-xs);
      background-color: var(--cp-border-soft);
      content: "";
      transform-origin: right;
      transition: transform 300ms var(--cp-easing-elastic);
    }
  }

  &__dotWrapper {
    display: flex;
    width: fn.px-to-rem(16);
    height: fn.px-to-rem(16);
    align-items: center;
    justify-content: center;

    &:first-child {
      order: -1;
    }

    &:last-child {
      order: 1;
    }
  }

  &__dot {
    width: fn.px-to-rem(6);
    height: fn.px-to-rem(6);
    border-radius: var(--cp-radius-full);
    background-color: var(--cp-foreground-quaternary);
  }

  &__airlines {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--cp-spacing-xs);

    > *:not(:first-child) {
      margin-left: calc(var(--cp-spacing-md) * -1);
    }
  }

  &__remaining {
    display: flex;
    width: fn.px-to-rem(24);
    height: fn.px-to-rem(24);
    align-items: center;
    justify-content: center;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-background-tertiary);
    font-size: var(--cp-text-size-xs);
    font-weight: 600;
    line-height: var(--cp-line-height-xs);
  }

  &__tooltip {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding-block: var(--cp-spacing-sm);
  }

  &__summary {
    @extend %u-text-ellipsis;

    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-xs);
    line-height: var(--cp-line-height-xs);

    &:has(.cpTripTimeline__stop) {
      border-bottom: 1px dashed var(--cp-border-strong);
      cursor: help;
    }

    span:not(:first-child)::before {
      color: var(--cp-text-secondary);
      content: "•";
      font-size: var(--cp-text-size-xs);
      letter-spacing: var(--cp-letter-spacing-xs);
      line-height: var(--cp-line-height-xs);
      margin-inline: var(--cp-spacing-xs);
    }
  }

  &__transfer {
    color: var(--cp-text-error-primary);
    text-transform: capitalize;
  }

  &__stops {
    max-width: fn.px-to-rem(300);
  }

  &__stops li hr {
    border-radius: var(--cp-radius-md);
    margin-block: var(--cp-spacing-md);
  }

  &__stops li:last-child hr {
    display: none;
  }
}

@include mx.media-query-max(370px) {
  .cpTripTimeline {
    &__dotWrapper {
      display: none;
    }
  }
}

@include mx.media-query-max(300px) {
  .cpTripTimeline {
    &__information {
      padding-block: 0;

      &::before,
      &::after {
        display: none;
      }
    }

    &__remaining {
      width: fn.px-to-rem(20);
      height: fn.px-to-rem(20);
      font-size: fn.px-to-rem(10);
    }

    &__tooltip {
      padding-block: var(--cp-spacing-xs);
    }
  }
}
</style>
