<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { toRefs, ref } from 'vue'
import {
  triggerActionRequest,
  getI18n,
  purifyHtml,
} from '@/helper'
import {
  LabelControl,
} from './index'

import Notification from '@/helper/Notification.vue'
import Confirmation from '@/helper/Confirmation.vue'

const props = defineProps({
    params: {
        type: Object,
        required: true,
    },
})
const { params } = toRefs(props)
const argument = params.value
const isLink = ref<boolean>(argument['link'] ? true : false)
const external = ref<string>(argument['external'] ? '_blank' : '_self')
const isTriggerBtn = ref<boolean>(true)
const action = ref<string>(argument['action'])

const isConfirmationOpen = ref<boolean>(false)
const isConfirming = ref<boolean>(false)
const notificationMessageTitle = ref<string>('')
const notificationMessage = ref<string>('')
const notificationType = ref<string>('')

if ( action.value === 'submit' || action.value === 'button' ) {
  isTriggerBtn.value = false
}

if ( isLink.value ) {
  isTriggerBtn.value = false
}

const confirmMessage = getI18n('confirmText', __('Are you sure?', 'saveto-wishlist-lite-for-woocommerce'))

const handleConfirmation = () => {
  isConfirmationOpen.value = true
}

const triggerAction = async () => {
  isConfirming.value = true

  try {
    const payload = { action: action.value }
    const response = await triggerActionRequest(payload)
    if (response.type === 'success') {
      isConfirmationOpen.value = false
      isConfirming.value = false
      notificationMessage.value = response.message
      notificationMessageTitle.value = response.title
      notificationType.value = response.type
    } else {
      isConfirmationOpen.value = false
      isConfirming.value = false
      notificationMessage.value = response.message
      notificationMessageTitle.value = response.title
      notificationType.value = response.type
    }
  } catch (error) {
    console.error(error)
  }
}

const closeConfirmation = () => {
  isConfirmationOpen.value = false
  isConfirming.value = false
}

const closeNotification = () => {
  notificationMessage.value = ''
}
</script>

<template>
  <div v-if="isTriggerBtn">
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-mb-2 stwlite-tw-gap-2">
      <LabelControl :params="argument" />
    </div>
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-mb-2 stwlite-tw-gap-2">
      <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-space-x-2">
        <button
          v-if="argument['confirmation']"
          class="stwlite-tw-bg-blue-600 stwlite-tw-text-white stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-rounded-md stwlite-tw-font-medium hover:stwlite-tw-bg-blue-700 stwlite-tw-transition-colors stwlite-tw-border-0 stwlite-tw-cursor-pointer stwlite-tw-mb-3 stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700"
          type="button"
          :disabled="isConfirming"
          @click="handleConfirmation"
        >
          <span v-if="isConfirming">{{ getI18n('loading', __('Loading...', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
          <span v-else>{{ argument['button_label'] }}</span>
        </button>
        <button
          v-else
          class="stwlite-tw-bg-blue-600 stwlite-tw-text-white stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-rounded-md stwlite-tw-font-medium hover:stwlite-tw-bg-blue-700 stwlite-tw-transition-colors stwlite-tw-border-0 stwlite-tw-cursor-pointer stwlite-tw-mb-3 stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700"
          type="button"
          :disabled="isConfirming"
          @click="triggerAction"
        >
          <span v-if="isConfirming">{{ getI18n('loading', __('Loading...', 'saveto-wishlist-lite-for-woocommerce')) }}</span>
          <span v-else>{{ argument['button_label'] }}</span>
        </button>
        <label :for="argument['id']" class="stwlite-tw-text-sm stwlite-tw-text-gray-700">{{ argument['input_label'] }}</label>
      </div>
      <Tooltip :params="argument" />
    </div>
    <p v-if="argument['description'] !== 'undefined'" class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mt-2" v-html="purifyHtml(argument?.['description'] ?? '')" />

    <Confirmation
      :isOpen="isConfirmationOpen"
      :processing="isConfirming"
      :title="getI18n('confirmation_title', __('Confirmation', 'saveto-wishlist-lite-for-woocommerce'))"
      :message="confirmMessage"
      :confirmText="getI18n('yes', __('Yes', 'saveto-wishlist-lite-for-woocommerce'))"
      :cancelText="getI18n('no', __('No', 'saveto-wishlist-lite-for-woocommerce'))"
      @closeAction="closeConfirmation"
      @confirmAction="triggerAction"
    />

    <Notification
      v-if="notificationMessage"
      :message="notificationMessage"
      :type="notificationType"
      :messageTitle="notificationMessageTitle"
      @closeNotification="closeNotification"
    />
  </div>
  <div
    v-else
    class="stw-button-control"
  >
    <div :class="argument['classes']">
      <a
        v-if="isLink"
        :id="argument['id']"
        :href="argument['link']"
        :target="external"
      >
        {{ argument['button_label'] }}
      </a>
      <button
        v-else
        :id="argument['id']"
        :type="argument['action']"
      >
        {{ argument['button_label'] }}
      </button>
    </div>
  </div>
</template>