<template>
  <q-dialog ref="dialog">
    <q-card :style="'width:' + props.width">
      <q-card-section
        v-if="props.dialogLabel"
        class="text-h6 text-center"
        :class="'text-' + props.labelColor"
        >{{ props.dialogLabel }}</q-card-section
      >
      <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
        props.text
      }}</q-card-section>
      <q-card-actions align="right" class="text-primary">
        <q-btn
          v-if="props.buttonCancelLabel"
          :flat="props.buttonCancelFlat"
          :label="props.buttonCancelLabel"
          v-close-popup
        >
        </q-btn>
        <q-btn
          v-if="props.buttonOkLabel"
          :flat="props.buttonOkFlat"
          :label="props.buttonOkLabel"
          :color="props.buttonOkColor"
          v-close-popup
          @click="confirm"
        >
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

const props = defineProps({
  buttonOkLabel: {
    type: String,
    default: 'OK',
  },
  buttonOkColor: {
    type: String,
    default: '',
  },
  buttonOkFlat: {
    type: Boolean,
    default: true,
  },
  labelColor: {
    type: String,
    default: 'primary',
  },
  dialogLabel: {
    type: String,
    default: '',
  },
  text: {
    type: String,
    default: '',
  },
  buttonCancelLabel: {
    type: String,
    default: '',
  },
  buttonCancelFlat: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '300px',
  },
});

const emit = defineEmits(['update-confirm']);

const dialog = ref();
const localInput = ref();

const open = (input?: unknown) => {
  localInput.value = input;
  dialog.value?.show();
};

const confirm = () => {
  emit('update-confirm', localInput.value);
};

defineExpose({ open });
</script>
