<template>
  <div class="cpTripLegRouteInformation">
    <div class="cpTripLegRouteInformation__icon">
      <cp-icon size="18" type="flight" />
    </div>
    <div class="cpTripLegRouteInformation__content" @click="toggleDetails">
      <div class="cpTripLegRouteInformation__main">
        <div class="cpTripLegRouteInformation__airline">
          <cp-airline-logo class="cpTripLegRouteInformation__logo" :iata-code="airlineIata" />
        </div>
        <cp-badge class="cpTripLegRouteInformation__badge" size="sm">{{ airlineName }}</cp-badge>
        <cp-badge class="cpTripLegRouteInformation__badge" color="accent" size="sm">{{ flightDuration }}</cp-badge>
        <div class="cpTripLegRouteInformation__toggle">
          <button class="toggle__button" type="button" @click.stop="toggleDetails">
            <cp-icon class="toggle__icon" :class="toggleDynamicClass" size="16" type="chevron-down" />
          </button>
        </div>
      </div>
      <cp-transition-expand>
        <div v-if="isToggled" class="cpTripLegRouteInformation__details">
          <div class="details__wrapper">
            <p class="details__title">{{ config.routeInformation.connectionInfo }}</p>
            <span class="details__label">
              <cp-airline-logo class="details__airlineLogo" :iata-code="airlineIata" :size="16" />
              {{ config.routeInformation.airline }}
            </span>
            <span class="details__value">{{ airlineName }}</span>
            <span class="details__label">
              <cp-icon class="details__icon" size="16" type="info" />{{ config.routeInformation.flightNo }}
            </span>
            <span class="details__value">{{ flightNumber }}</span>
            <template v-if="technicalStop">
              <span class="details__label">
                <cp-icon class="details__icon" size="16" type="route-one-stop" />
                {{ config.routeInformation.technicalStop }}
              </span>
              <span class="details__value">{{ technicalStop }}</span>
            </template>
          </div>
        </div>
      </cp-transition-expand>
    </div>
  </div>
</template>

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

import type { CpTripDetailsConfig } from '@/constants/tripDetails/CpTripDetailsConfig'
import type { FlightSegment } from '@/constants/tripDetails/FlightSegment'

import CpAirlineLogo from './CpAirlineLogo.vue'
import CpBadge from './CpBadge.vue'
import CpIcon from './CpIcon.vue'
import CpTransitionExpand from './CpTransitionExpand.vue'

interface Props {
  config: CpTripDetailsConfig
  flightDuration: string
  segment: FlightSegment
}

const props = defineProps<Props>()

const isToggled = ref(false)

const airlineIata = computed(() => props.segment.airline.iata_code)
const airlineName = computed(() => props.segment.airline.name || 'n/a')
const flightNumber = computed(() => props.segment.flight_number)

const technicalStop = computed(() => {
  const viaAirport = props.segment.via_airport
  return viaAirport ? `${viaAirport.city_name} (${viaAirport.iata_code})` : ''
})

const toggleDynamicClass = computed(() => ({ 'toggle__icon--isRotated': isToggled.value }))

const toggleDetails = () => (isToggled.value = !isToggled.value)
</script>

<style lang="scss">
.cpTripLegRouteInformation {
  position: relative;
  display: flex;
  width: min(100%, #{fn.px-to-rem(450)});
  align-items: flex-start;

  &::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;
  }

  &__icon {
    position: relative;
    display: flex;
    width: fn.px-to-rem(18);
    flex-shrink: 0;
    align-items: center;
    margin: fn.px-to-rem(22) var(--cp-spacing-md) 0 fn.px-to-rem(3); // 3px so it matches 24px width (18px + 2 * 3px)
    background-color: var(--cp-background-primary);
    color: var(--cp-text-secondary);
    transform: rotate(180deg);
  }

  &__icon::before {
    position: absolute;
    z-index: -1;
    top: calc(#{var(--cp-spacing-sm)} / 2 * -1);
    width: 100%;
    height: calc(100% + #{var(--cp-spacing-sm)});
    background-color: var(--cp-background-primary);
    content: '';
  }

  &__icon i {
    width: 100%;
  }

  &__content {
    min-width: 0;
    flex: 1;
    align-items: center;
    cursor: pointer;
    padding-block: fn.px-to-rem(20);
  }

  &__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cp-spacing-md);
  }

  &__airline {
    @include mx.square-sizing(24);

    overflow: hidden;
    border-radius: fn.px-to-rem(4);
  }

  &__logo {
    width: 100% !important;
  }

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

    min-width: 0;

    .cpBadge__label {
      text-transform: initial !important;
    }
  }

  .details {
    &__wrapper {
      display: grid;
      width: min(100%, #{fn.px-to-rem(300)});
      padding: var(--cp-spacing-lg) 0 var(--cp-spacing-md);
      font-size: fn.px-to-em(14);
      gap: var(--cp-spacing-md);
      grid-template-columns: auto 1fr;
    }

    &__title {
      margin-bottom: var(--cp-spacing-xs);
      font-weight: 600;
      grid-column: 1 / -1;
    }

    &__label,
    &__value {
      color: var(--cp-text-secondary);
      text-transform: capitalize;
    }

    &__label {
      display: flex;
      align-items: center;
    }

    &__icon,
    &__airlineLogo {
      margin-right: var(--cp-spacing-md);
    }

    &__value {
      text-align: right;
    }
  }

  &__toggle {
    flex-shrink: 0;
  }

  .toggle {
    &__button {
      display: flex;
      align-items: center;
      padding: var(--cp-spacing-sm);
      border-radius: 50%;
      background-color: var(--cp-background-secondary);

      &:focus-visible {
        @extend %u-focus-outline;
      }
    }

    &__icon {
      transition: rotate 300ms ease;

      &--isRotated {
        rotate: 180deg;
      }
    }
  }
}
</style>
