<script setup lang="ts">
import Dialog from 'primevue/dialog';
import type IVModal from './IVModal.type';
import { useId, computed } from 'vue';
import VButtonGroup from '../button/VButtonGroup.vue';
import VButton from '../button/VButton.vue';
import styles from '@/assets/typography.module.css'

const props = withDefaults(defineProps<IVModal>(), {
  modalId: () => useId(),
  actions: () => [],
  icon: undefined,
  size: 'md',
  closeButtonLabel: 'Fermer',
  closeButtonTitle: 'Fermer la fenêtre modale',
  title: undefined,
  opened: false,
  isAlert: false,
  breakpoints: undefined,
})

const role = computed(() => {
  return props.isAlert ? 'alertdialog' : 'dialog'
})

const modalSize = computed(() => {
  switch (props.size) {
    case 'lg':
      return `width: 49.5rem;`
    case 'md':
      return `width: 36.75rem;`
    case 'sm':
      return `width: 24rem;`
    default:
      return `width: 36.75rem;`
  }
})

const emit = defineEmits(['update:opened'])

const visible = computed({
  get: () => props.opened,
  set: (value: boolean) => emit('update:opened', value),
})

</script>

<template>
  <Dialog
    :header="props.title"
    id="modal"
    modal
    v-model:visible="visible"
    :role="role"
    :aria-model="true"
    :aria-labelledby="`modal-${props.modalId}-dialog`"
    ref="modal"
    :style="modalSize"
    :breakpoints="props.breakpoints"
  >
    <template #header>
      <slot name="header" v-if="props.icon !== undefined">
        <span :class="[styles['titles-H6-XXS']]">
          <i :class="props.icon"></i>
          {{ props.title }}
        </span>
      </slot>
    </template>
    <slot name="content"/>
    <template #footer>
      <slot name="footer">
        <VButtonGroup
          v-if="props.actions?.length"
          inline-layout-when="always"
          align="right"
          :buttons="props.actions"
          size="sm"
          title="groupe de boutons"
        />
      </slot>
    </template>
    <template #closebutton="{closeCallback}">
      <VButton
        tertiary
        noOutline
        size="sm"
        icon="ri-close-line"
        iconRight
        @click="closeCallback"
        :label="closeButtonLabel"
        :title="closeButtonTitle"
        ref="closeBtn"
        aria-controls="modal-1"
        type="button"
      />
    </template>
  </Dialog>
</template>
