<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { ref, toRefs, defineEmits } from "vue"
import { Dialog, DialogPanel, DialogTitle, TransitionRoot, TransitionChild } from "@headlessui/vue"
import { getI18n } from '@/helper'

const props = withDefaults(defineProps<{
  isOpen: boolean
  processing: boolean
  title: string
  message: string
  confirmText: string
  cancelText: string
}>(), {
  isOpen: false,
  processing: false,
  title: getI18n('confirmation_title', __('Confirmation', 'saveto-wishlist-lite-for-woocommerce')),
  message: getI18n('confirmation_message', __('Are you sure you want to confirm this action?', 'saveto-wishlist-lite-for-woocommerce')),
  confirmText: getI18n('confirmation_confirm_text', __('Confirm', 'saveto-wishlist-lite-for-woocommerce')),
  cancelText: getI18n('confirmation_cancel_text', __('Cancel', 'saveto-wishlist-lite-for-woocommerce')),
})

const emit = defineEmits(['confirmAction', 'closeAction'])

const { isOpen, processing, title, message, confirmText, cancelText } = toRefs(props)

const closeModal = () => {
  emit('closeAction')
}

const confirmAction = () => {
  emit('confirmAction')
}
</script>

<template>
  <div :class="isOpen ? 'stwlite-tw-p-6' : ''">
    <!-- Confirmation Dialog -->
    <TransitionRoot appear :show="isOpen" as="template">
      <Dialog as="div" class="stwlite-tw-relative stwlite-tw-z-50" @close="closeModal">
        <!-- Backdrop -->
        <TransitionChild
          as="template"
          enter="stwlite-tw-ease-out stwlite-tw-duration-300"
          enter-from="stwlite-tw-opacity-0"
          enter-to="stwlite-tw-opacity-100"
          leave="stwlite-tw-ease-in stwlite-tw-duration-200"
          leave-from="stwlite-tw-opacity-100"
          leave-to="stwlite-tw-opacity-0"
        >
          <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-bg-black stwlite-tw-bg-opacity-40" />
        </TransitionChild>

        <!-- Dialog Panel -->
        <div class="stwlite-tw-fixed stwlite-tw-inset-0 stwlite-tw-overflow-y-auto">
          <div class="stwlite-tw-flex stwlite-tw-min-h-full stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-p-4 stwlite-tw-text-center">
            <TransitionChild
              as="template"
              enter="stwlite-tw-ease-out stwlite-tw-duration-300"
              enter-from="stwlite-tw-opacity-0 stwlite-tw-scale-95"
              enter-to="stwlite-tw-opacity-100 stwlite-tw-scale-100"
              leave="stwlite-tw-ease-in stwlite-tw-duration-200"
              leave-from="stwlite-tw-opacity-100 stwlite-tw-scale-100"
              leave-to="stwlite-tw-opacity-0 stwlite-tw-scale-95"
            >
              <DialogPanel
                class="stwlite-tw-w-full stwlite-tw-max-w-md stwlite-tw-transform stwlite-tw-overflow-hidden stwlite-tw-rounded-2xl stwlite-tw-bg-white stwlite-tw-p-6 stwlite-tw-text-left stwlite-tw-align-middle stwlite-tw-shadow-xl stwlite-tw-transition-all"
              >
                <!-- Title -->
                <DialogTitle as="h3" class="stwlite-tw-text-lg stwlite-tw-font-medium stwlite-tw-leading-6 stwlite-tw-text-gray-900">
                  {{ title }}
                </DialogTitle>

                <!-- Content -->
                <div class="stwlite-tw-mt-2">
                  <p class="stwlite-tw-text-sm stwlite-tw-text-gray-500">
                    {{ message }}
                  </p>
                </div>

                <!-- Buttons -->
                <div class="stwlite-tw-mt-4 stwlite-tw-flex stwlite-tw-justify-end stwlite-tw-gap-3">
                  <button
                    @click="closeModal"
                    class="stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-bg-gray-200 stwlite-tw-text-gray-800 stwlite-tw-rounded-lg hover:stwlite-tw-bg-gray-300"
                  >
                    {{ cancelText }}
                  </button>
                  <button
                    @click="confirmAction"
                    class="stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-bg-red-600 stwlite-tw-text-white stwlite-tw-rounded-lg hover:stwlite-tw-bg-red-700"
                    :disabled="processing"
                  >
                    {{ confirmText }}
                  </button>
                </div>
              </DialogPanel>
            </TransitionChild>
          </div>
        </div>
      </Dialog>
    </TransitionRoot>
  </div>
</template>