<template>
  <div
    v-tooltip="facilityTooltip"
    class="cpSeatMapRowFacility"
    :class="facilityDynamicClass"
    :style="facilityDynamicStyle"
  >
    <cp-icon class="cpSeatMapRowFacility__icon" size="16" :type="facilityIcon" />
  </div>
</template>

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

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

import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
import { SeatRowFacilities, SeatRowFacilityPosition } from '@/constants/seatMap/SeatRowFacilities'
import CpIcon from './CpIcon.vue'

interface Props {
  columnsCount: number
  config?: CpSeatMapConfig
  isTop?: boolean
  position: SeatRowFacilityPosition
  seatBlockSize: number
  type: SeatRowFacilities
}

const props = withDefaults(defineProps<Props>(), {
  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
  isTop: false,
})

const isLavatory = computed(() => props.type === SeatRowFacilities.LAVATORY)
const isGalley = computed(() => props.type === SeatRowFacilities.GALLEY)

const facilityIcon = computed(() => {
  if (isGalley.value) return 'coffee'
  return 'handshake'
})

const isLeftFacility = computed(() => props.position === SeatRowFacilityPosition.LEFT)
const isRightFacility = computed(() => props.position === SeatRowFacilityPosition.RIGHT)

const facilityDynamicStyle = computed(() => {
  const columnStart = isLeftFacility.value ? 1 : props.seatBlockSize + 1
  const columnEnd = isRightFacility.value ? props.columnsCount + 1 : props.seatBlockSize

  return {
    gridColumn: `${columnStart} / ${columnEnd}`,
  }
})

const facilityDynamicClass = computed(() => {
  return {
    'cpSeatMapRowFacility--isTop': props.isTop,
  }
})

const facilityTooltip = computed(() => {
  if (isLavatory.value) return props.config.facility.lavatory
  if (isGalley.value) return props.config.facility.galley

  return ''
})
</script>

<style lang="scss">
.cpSeatMapRowFacility {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--cp-spacing-xl);
  border-radius: var(--cp-spacing-sm);
  background-color: var(--cp-background-accent-secondary);

  &:is(.v-popper--has-tooltip) {
    cursor: help;
  }

  &__icon {
    color: var(--cp-foreground-accent-secondary);
  }
}
</style>
