<template>
  <UModal
    :title="title"
    :ui="{
  content: 'divide-y-0',
  body: 'py-0! text-sm',
  description: 'hidden',
  footer: 'justify-end'
}"
    :class="ui.root({ class: [props.ui?.root, props.class] })"
  >
    <template #description />
    <template #body>
      {{ message }}

      <UForm
        v-if="confirmText"
        id="confirm-form"
        ref="form"
        class="pt-3"
        :state="state"
        @submit="handleConfirmClick()"
      >
        <UFormField name="confirmTextValue">
          <template #label>
            Введите <strong class="text-highlighted">{{ confirmText }}</strong> для подтверждения
          </template>

          <UInput v-model="state.confirmTextValue" class="w-full" />
        </UFormField>
      </UForm>
    </template>

    <template #footer>
      <UButton
        color="neutral"
        label="Закрыть"
        variant="ghost"
        :size="size"
        @click="emit('close')"
      />

      <UButton
        v-if="confirmText"
        form="confirm-form"
        type="submit"
        :label="confirmLabel"
        :disabled="state.confirmTextValue !== confirmText"
        :loading="form?.loading"
        :color="color"
        :size="size"
      />
      <UButton
        v-else
        label="Подтвердить"
        loading-auto
        :color="color"
        :size="size"
        @click="handleConfirmClick()"
      />
    </template>
  </UModal>
</template>

<script>
import theme from "#build/cms/modal-confirm";
import { useAppConfig } from "#imports";
import { computed, reactive, useTemplateRef } from "vue";
import { tv } from "../tv";
</script>

<script setup>
const props = defineProps({
  title: { type: String, required: false },
  message: { type: String, required: true },
  confirmText: { type: String, required: false },
  confirmLabel: { type: String, required: false, default: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" },
  color: { type: null, required: false },
  size: { type: null, required: false, default: "lg" },
  onConfirm: { type: Function, required: false },
  class: { type: null, required: false },
  ui: { type: null, required: false }
});
const emit = defineEmits(["confirm", "close"]);
const appConfig = useAppConfig();
const form = useTemplateRef("form");
const state = reactive({
  confirmTextValue: ""
});
async function handleConfirmClick() {
  await props.onConfirm?.();
  emit("close");
}
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.modalConfirm || {} })());
</script>
