<template>
  <div class="cpSeatMapSeat" :class="seatDynamicClass">
    <transition name="fade">
      <cp-icon v-if="isUnavailable" size="16" type="x" />
      <div v-else>
        <icon-sparkle v-if="isFree" />
        <span v-else-if="isOccupiedByCurrentPax">
          <slot />
        </span>
        <span v-else-if="isPayable">{{ seatAmount }}</span>
      </div>
    </transition>
  </div>
</template>

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

import type { SeatAncillary } from '@/constants/seatMap/SeatAncillary'

import { SeatStatuses } from '@/constants/seatMap/SeatStatuses'
import CpIcon from './CpIcon.vue'
import IconSparkle from './icons/IconSparkle.vue'

interface Props {
  seat: {
    selected_ancillary?: SeatAncillary
    status: SeatStatuses
  }
}

const props = defineProps<Props>()

const seatStatus = computed(() => props.seat.status)

const isOccupied = computed(() => [SeatStatuses.OCCUPIED, SeatStatuses.BLOCKED].includes(seatStatus.value))
const isOccupiedByCurrentPax = computed(() => seatStatus.value === SeatStatuses.OCCUPIED_BY_CURRENT_PAX)
const isUnavailable = computed(() => isOccupied.value)
const isPayable = computed(() => seatStatus.value === SeatStatuses.PAYABLE)
const isFree = computed(() => seatStatus.value === SeatStatuses.FREE)

const seatDynamicClass = computed(() => {
  return {
    'cpSeatMapSeat--isOccupied': isOccupied.value,
    'cpSeatMapSeat--isOccupiedByCurrentPax': isOccupiedByCurrentPax.value,
    'cpSeatMapSeat--isUnavailable': isUnavailable.value,
    'cpSeatMapSeat--isPayable': isPayable.value,
    'cpSeatMapSeat--isFree': isFree.value,
  }
})

// The API already ships a localised, currency-aware string, so no formatting here.
const seatAmount = computed(() => {
  if (!isPayable.value) return ''
  return props.seat.selected_ancillary?.formatted_amount || '€'
})
</script>

<style lang="scss">
.cpSeatMapSeat {
  position: relative;
  display: flex;
  width: var(--seat-width);
  height: var(--seat-width);
  align-items: center;
  justify-content: center;
  border-radius: fn.px-to-rem(4);
  aspect-ratio: 1 / 1;
  font-size: fn.px-to-em(10);
  font-weight: 700;
  line-height: fn.px-to-rem(24);
  text-transform: uppercase;
  transition:
    background-color 200ms ease,
    color 200ms ease;

  &--isFree {
    border: fn.px-to-rem(1) solid var(--cp-border-strong);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--cp-border-strong);
  }

  &--isFree::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: fn.px-to-rem(8);
    border: fn.px-to-rem(1) solid var(--cp-border-strong);
    border-radius: fn.px-to-rem(6) fn.px-to-rem(6) 0 0;
    border-bottom: none;
    content: '';
    pointer-events: none;
  }

  &--isOccupiedByCurrentPax {
    background-color: var(--cp-background-accent-solid);
    color: var(--cp-text-white);
  }

  &--isUnavailable {
    background-color: var(--cp-utility-neutral-100);

    i {
      color: var(--cp-foreground-disabled);
    }
  }

  &--isPayable {
    border: fn.px-to-rem(1) solid var(--cp-border-warning-primary);
    color: var(--cp-text-warning-primary);
    font-weight: 500;
  }

  &--isPayable:is(&--isOccupiedByCurrentPax) {
    background-color: var(--cp-background-warning-solid);
    color: var(--cp-text-white);
  }

  &--isPayable::after {
    position: absolute;
    right: var(--cp-spacing-xs);
    bottom: var(--cp-spacing-xs);
    border-radius: var(--cp-radius-xs);
    border-bottom: fn.px-to-rem(10) solid var(--cp-border-warning-solid);
    border-left: fn.px-to-rem(10) solid transparent;
    content: '';
  }
}

@include mx.media-query-max(551px) {
  .cpSeatMapSeat {
    width: var(--seat-mobile-width);
    height: var(--seat-mobile-width);
  }
}
</style>
