<script setup>
import { defineProps, ref, watch } from "vue";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  content: String,
  status: String,
  open: Boolean,
  cancel: Function,
  confirm: Function,
  to: {
    default: "body",
    type: String,
  },
});
const isOpen = ref(false);

// TODO: 之後需要優化，改將Toast放在 App.js 裡面， 這樣可以簡單復用
watch(
  () => props.open,
  (newVal) => {
    isOpen.value = newVal;
    if (newVal && props.status !== "warning") {
      setTimeout(() => {
        props.cancel && props.cancel();
      }, 3000);
    }
  }
);
</script>

<template>
  <Teleport :to="to">
    <template v-if="isOpen">
      <div
        role="alert"
        :class="
          twMerge(
            `alert text-xl rounded-md fixed left-1/2 -translate-x-1/2 top-24 z-[1000] max-w-fit`,
            status === 'info'
              ? 'alert-info'
              : status === 'error'
              ? 'alert-error text-white'
              : status === 'warning'
              ? 'alert-warning bg-yellow-400'
              : 'alert-success'
          )
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          class="stroke-current shrink-0 w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          ></path>
        </svg>
        <span>{{ content }}</span>
        <div v-if="status === 'warning'">
          <button @click="props.cancel && props.cancel();" className="btn btn-sm btn-outline me-2">{{$t("button.cancel")}}</button>
          <button @click="props.confirm && props.confirm()" className="btn btn-sm">{{$t("button.confirm")}}</button>
        </div>
      </div>
    </template>
  </Teleport>
</template>

<style lang="scss" scoped></style>
