<template>
  <q-dialog v-model="dialog" @hide="$emit('close')">
    <q-card :style="'min-width: 330px;' + (wide ? 'max-width: 990px;' : 'max-width:90vw; ')">
      <!-- Шапка диалога -->
      <q-card-section :class="'text-white bg-' + color">
        <div class="row items-center">
          <q-icon v-if="icon" :name="icon" size="md" class="q-mr-sm" />
          <div class="col">
            <div class="text-h6">
              {{ title }}
            </div>
            <div v-if="subtitle" class="text-subtitle1 q-my-xs">
              {{ subtitle }}
            </div>
          </div>

          <!-- закрыть диалог -->
          <q-btn v-if="noActions" v-close-popup icon="close" color="white" class="q-ml-sm" round flat />
        </div>
      </q-card-section>

      <!-- Слот для содержимого -->
      <q-card-section>
        <slot />
      </q-card-section>

      <!-- Действия -->
      <q-card-section v-if="!noActions" class="row q-pt-none">
        <!-- подтвердить -->
        <q-btn @click="$emit('confirm')" :label="button" :color="color" padding="sm md" class="col" />
        <!-- отменить -->
        <q-btn v-close-popup @click="$emit('cancel')" :label="t`Відмінити`" class="col" flat />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed } from 'vue'
import tfm from '@nitra/tfm'

const t = tfm.bind({ tr: getTr() })

const props = defineProps({
  // состояние диалога
  modelValue: {
    type: Boolean,
    default: null
  },
  // заголовок
  title: {
    type: String,
    default: ''
  },
  // подзаголовок
  subtitle: {
    type: String,
    default: ''
  },
  // иконка диалога
  icon: {
    type: String,
    default: null
  },
  // цвет диалога
  color: {
    type: String,
    default: 'primary'
  },
  // название кнопки подтверждения
  button: {
    type: String,
    default: 'Подтвердить'
  },
  // название кнопки отмены
  buttonCancel: {
    type: String,
    default: ''
  },
  // без кнопок (появится крестик закрытия диалога в шапке)
  noActions: {
    type: Boolean,
    default: false
  },
  // широкий вариант
  wide: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])

// состояние диалога - активен / неактивен
const dialog = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

/**
 * LOCALIZATION
 * @returns {object} translations
 */
function getTr() {
  return {
    Відмінити: { ru: 'Отмена' }
  }
}
</script>
