<template>
  <div class="cpSeatMapPlane" :class="planeDynamicClass">
    <div class="cpSeatMapPlane__plane">
      <icon-plane-nose class="cpSeatMapPlane__nose" />
      <icon-plane-wing class="cpSeatMapPlane__wing cpSeatMapPlane__wing--isLeft" />
      <icon-plane-wing class="cpSeatMapPlane__wing cpSeatMapPlane__wing--isRight" />
    </div>

    <div class="cpSeatMapPlane__body">
      <div class="cpSeatMapPlane__cabin">
        <transition mode="out-in" :name="dynamicTransitionName">
          <div :key="mapKey" class="cpSeatMapPlane__content">
            <slot />
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

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

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

import { CpSeatMapTransitionDirections } from '@/constants/seatMap/CpSeatMapTransitionDirections'
import IconPlaneNose from './icons/IconPlaneNose.vue'
import IconPlaneWing from './icons/IconPlaneWing.vue'

interface Props {
  isLarge?: boolean
  /** Changing this replays the cabin transition — pass the current segment id. */
  mapKey?: string
  transitionDirection?: CpSeatMapTransitionDirections
}

const props = withDefaults(defineProps<Props>(), {
  isLarge: false,
  mapKey: '',
  transitionDirection: CpSeatMapTransitionDirections.FORWARD,
})

const isMobile = useIsBreakpoint()

const planeDynamicClass = computed(() => {
  return {
    'cpSeatMapPlane--isLarge': props.isLarge,
  }
})

const dynamicTransitionName = computed(() => {
  if (isMobile.value) return `cpSeatMapSlide-${props.transitionDirection}`
  return 'cpSeatMapFade'
})
</script>

<style lang="scss">
.cpSeatMapFade-enter-active,
.cpSeatMapFade-leave-active {
  transition: opacity 300ms ease;
}

.cpSeatMapFade-enter-from,
.cpSeatMapFade-leave-to {
  opacity: 0;
}

.cpSeatMapSlide-backward,
.cpSeatMapSlide-forward {
  &-enter-active,
  &-leave-active {
    transition:
      transform 200ms ease,
      opacity 200ms ease;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }

  &-enter-to {
    transform: translate3d(0, 0, 0);
  }
}

.cpSeatMapSlide-forward {
  &-enter-from {
    transform: translate3d(3vw, 0, 0);
  }

  &-leave-to {
    transform: translate3d(-3vw, 0, 0);
  }
}

.cpSeatMapSlide-backward {
  &-enter-from {
    transform: translate3d(-3vw, 0, 0);
  }

  &-leave-to {
    transform: translate3d(3vw, 0, 0);
  }
}

.cpSeatMapPlane {
  position: relative;
  height: 100%;
  animation: cp-seat-map-plane-reveal 1000ms ease forwards;

  $plane-shadow:
    inset 20px 0 20px -20px #eaecff,
    inset -20px 0 20px -20px #eaecff;

  @keyframes cp-seat-map-plane-reveal {
    from {
      opacity: 0;
      transform: translateY(100%) scale(2);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes cp-seat-map-cabin-reveal {
    to {
      opacity: 1;
    }
  }

  &__nose {
    position: absolute;
    z-index: 0;
    top: 0;
    width: 100%;
    transform: translateY(calc(-100% + fn.px-to-rem(35)));

    path {
      box-shadow: $plane-shadow;
      stroke-width: fn.px-to-rem(2);
    }
  }

  &__plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  &__wing {
    position: absolute;
    top: max(60%, fn.px-to-rem(500));
    width: fn.px-to-rem(180);
    height: max(30%, fn.px-to-rem(265));
    transform: translateY(-60%);

    &--isLeft {
      left: fn.px-to-rem(-180);
    }

    &--isRight {
      right: fn.px-to-rem(-180);
      transform: translateY(-60%) scaleX(-1);
    }
  }

  &__body {
    position: relative;
    z-index: 1;
    min-height: 100%;
    padding: fn.px-to-rem(40) var(--cp-spacing-2xl);
    border-right: 1px solid var(--cp-border-soft);
    border-left: 1px solid var(--cp-border-soft);
    background-color: var(--cp-background-primary);
    box-shadow: $plane-shadow;
  }

  &--isLarge .cpSeatMapPlane__body {
    padding-inline: var(--cp-spacing-md);
  }

  &__cabin {
    animation: cp-seat-map-cabin-reveal 1000ms ease forwards 1000ms;
    opacity: 0;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: var(--cp-spacing-2xl);
    transition-timing-function: ease-in-out;
  }
}

@include mx.media-query-max(551px) {
  .cpSeatMapPlane {
    animation: none;

    &__body {
      padding: 0;
      border: none;
      background-color: transparent;
      box-shadow: none;
    }

    &__cabin {
      animation-delay: 200ms;
    }

    &__content {
      gap: var(--cp-spacing-xl);
    }
  }
}
</style>
