<template>
  <cp-dynamic-dialog
    v-model:is-visible="isVisible"
    class="cpSeatMapEmergencyExitDialog"
    :max-width="450"
    :title="config.emergencyExit.title"
    @close="emit('close')"
  >
    <div class="cpSeatMapEmergencyExitDialog__content">
      <p class="cpSeatMapEmergencyExitDialog__description">{{ config.emergencyExit.subtitle }}</p>
      <cp-alert color="warning" :title="config.emergencyExit.disclaimerTitle">
        <p>{{ config.emergencyExit.disclaimerContent }}</p>
      </cp-alert>
    </div>

    <template #footer>
      <div class="cpSeatMapEmergencyExitDialog__footer">
        <cp-button appearance="secondary" class="cpSeatMapEmergencyExitDialog__close" @click="emit('close')">
          {{ config.emergencyExit.close }}
        </cp-button>
        <cp-button color="success" @click="emit('confirm')">
          {{ config.emergencyExit.confirm }}
        </cp-button>
      </div>
    </template>
  </cp-dynamic-dialog>
</template>

<script setup lang="ts">
import type { CpSeatMapConfig } from '@/constants/seatMap/CpSeatMapConfig'

import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
import CpAlert from './CpAlert.vue'
import CpButton from './CpButton.vue'
import CpDynamicDialog from './CpDynamicDialog.vue'

interface Props {
  config?: CpSeatMapConfig
}

withDefaults(defineProps<Props>(), {
  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
})

const emit = defineEmits<{
  close: []
  confirm: []
}>()

const isVisible = defineModel<boolean>('isVisible', { default: false })
</script>

<style lang="scss">
html:has(.cpSeatMapEmergencyExitDialog) .cpBottomSheet__backdrop {
  z-index: 1;
}

.cpBottomSheet:has(.cpSeatMapEmergencyExitDialog) {
  z-index: 2;
}

.cpSeatMapEmergencyExitDialog {
  &__content {
    display: flex;
    flex-direction: column;
    gap: var(--cp-spacing-lg);
  }

  &__description {
    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-sm);
    line-height: var(--cp-line-height-sm);
  }

  &__footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-spacing-xl);

    > * {
      flex: 1;
    }
  }
}
</style>
