<template>
  <UTooltip
    :text="tooltipText"
    :content="{ side: 'top' }"
    :disabled="!tooltipText"
    disable-hoverable-content
    disable-closing-trigger
  >
    <UButton
      :color="color"
      :variant="variant"
      :size="size"
      :icon="icon"
      :label="label === '' ? void 0 : label"
      :class="ui.root({ class: [props.ui?.root, props.class] })"
      auto-loading
      @click="handleDeleteClick()"
    />
  </UTooltip>
</template>

<script>
import theme from "#build/cms/button-delete-confirm";
import { useAppConfig, useOverlay } from "#imports";
import { computed } from "vue";
import { tv } from "../tv";
import CModalConfirm from "./ModalConfirm.vue";
</script>

<script setup>
const props = defineProps({
  modalProps: { type: Object, required: false },
  confirmText: { type: String, required: false },
  confirmLabel: { type: String, required: false, default: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" },
  title: { type: String, required: false },
  message: { type: String, required: false },
  tooltipText: { type: String, required: false },
  color: { type: null, required: false, default: "error" },
  variant: { type: null, required: false },
  icon: { type: null, required: false },
  size: { type: null, required: false },
  label: { type: String, required: false, default: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" },
  class: { type: null, required: false },
  ui: { type: null, required: false },
  onConfirm: { type: Function, required: false }
});
defineEmits(["confirm", "close"]);
const appConfig = useAppConfig();
const modal = useOverlay().create(CModalConfirm);
function handleDeleteClick() {
  return modal.open({
    ...props.modalProps,
    title: props.title ?? "\u0423\u0434\u0430\u043B\u0435\u043D\u0438\u0435",
    message: props.message ?? "\u0412\u044B \u0434\u0435\u0438\u0306\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0445\u043E\u0442\u0438\u0442\u0435 \u0443\u0434\u0430\u043B\u0438\u0442\u044C?",
    color: "error",
    confirmLabel: props.confirmLabel,
    confirmText: props.confirmText,
    onConfirm: props.onConfirm
  });
}
const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.buttonDelete || {} })());
</script>
