<script setup lang="ts">
import { toRefs, ref, defineEmits } from 'vue'
import { X } from 'lucide-vue-next'

const props = withDefaults(defineProps<{
  messageTitle: string
  message: string
  type: string
  timeout?: number
}>(), {
  timeout: 5000,
})

const emit = defineEmits(['closeNotification'])

const { message, type, messageTitle, timeout } = toRefs(props)

const isOpen = ref<boolean>(true)

const closeNotification = () => {
  isOpen.value = false

  emit('closeNotification')
}

setTimeout(() => {
  closeNotification()
}, timeout.value)
</script>

<template>
  <transition
    enter="stwlite-tw-transform stwlite-tw-ease-out stwlite-tw-duration-300 stwlite-tw-transition"
    enter-from="stwlite-tw-translate-y-2 stwlite-tw-opacity-0 sm:stwlite-tw-translate-y-0 sm:stwlite-tw-translate-x-2"
    enter-to="stwlite-tw-translate-y-0 stwlite-tw-opacity-100 sm:stwlite-tw-translate-x-0"
    leave="stwlite-tw-transition stwlite-tw-ease-in stwlite-tw-duration-200"
    leave-from="stwlite-tw-opacity-100"
    leave-to="stwlite-tw-opacity-0"
  >
    <div v-if="isOpen" class="stw-notification stwlite-tw-fixed stwlite-tw-right-5 stwlite-tw-z-[60] stwlite-tw-w-80 stwlite-tw-rounded-lg stwlite-tw-bg-white stwlite-tw-shadow-lg stwlite-tw-ring-1 stwlite-tw-ring-black stwlite-tw-ring-opacity-5 stwlite-tw-overflow-hidden">
      <div class="stwlite-tw-p-4 stwlite-tw-flex stwlite-tw-items-start">
        <!-- Icon -->
        <div class="stwlite-tw-flex-shrink-0">
          <svg
            class="stwlite-tw-h-6 stwlite-tw-w-6 stwlite-tw-text-green-500"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            v-if="type === 'success'"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 13l4 4L19 7"
            />
          </svg>
          <svg
            class="stwlite-tw-h-6 stwlite-tw-w-6 stwlite-tw-text-red-500"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            v-if="type === 'error'"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>

        <!-- Text -->
        <div class="stwlite-tw-ml-3 stwlite-tw-w-0 stwlite-tw-flex-1 stwlite-tw-pt-0.5">
          <p class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-text-gray-900 stwlite-tw-mt-0">
            {{ messageTitle }}
          </p>
          <p class="stwlite-tw-mt-1 stwlite-tw-text-sm stwlite-tw-text-gray-500">
            {{ message }}
          </p>
        </div>

        <!-- Close button -->
        <div class="stwlite-tw-ml-4 stwlite-tw-flex-shrink-0 stwlite-tw-flex">
          <button class="stwlite-tw-inline-flex stwlite-tw-text-gray-400 hover:stwlite-tw-text-gray-500 focus:stwlite-tw-outline-none stwlite-tw-bg-transparent stwlite-tw-border-0 stwlite-tw-cursor-pointer" @click="closeNotification">
            <span class="stwlite-tw-sr-only"></span>
            <X class="stwlite-tw-w-4 stwlite-tw-h-4" />
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
/*
 * Sits just below the settings page's sticky header when rendered inside
 * it (reusing the same offset the sticky sidebar/preview panel use), and
 * falls back to a fixed offset elsewhere (e.g. the customer-facing
 * wishlist page), which has no such header to avoid.
 */
.stw-notification {
  top: var(--stwlite-sticky-top, 2.5rem);
}
</style>
