<template>
    <transition
        appear
        enter-active-class="transition-all duration-300 ease-in-out"
        enter-from-class="transform -translate-y-3 opacity-0"
        enter-to-class="scale-100 translate-y-0 opacity-100"
        leave-active-class="transition-all duration-300 ease-in-out"
        leave-from-class="scale-100 translate-y-0 opacity-100"
        leave-to-class="transform -translate-y-3 opacity-0"
    >
        <div
            v-if="show"
            ref="toast-success"
            id="toast-success"
            class="flex items-center w-full max-w-3xl gap-2 p-4 text-gray-500 bg-white rounded-lg shadow min-w-xs dark:text-gray-400 dark:bg-gray-800"
            role="alert"
        >
            <div
                class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-[#0e9f6e] bg-[#def7ec] rounded-lg"
            >
                <svg
                    aria-hidden="true"
                    class="w-5 h-5"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        fill-rule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clip-rule="evenodd"
                    ></path>
                </svg>
                <span class="sr-only">Check icon</span>
            </div>
            <div class="text-sm font-normal">
                {{ $page.props.flash.success }}
            </div>
            <div class="flex items-center ml-auto space-x-2">
                <button
                    @click="close"
                    type="button"
                    class="bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
                    data-dismiss-target="#toast-success"
                    aria-label="Close"
                >
                    <span class="sr-only">Close</span>
                    <svg
                        aria-hidden="true"
                        class="w-5 h-5"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd"
                        ></path>
                    </svg>
                </button>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            show: false,
        };
    },
    watch: {
        "$page.props.flash.success": {
            handler() {
                if (this.$page.props.flash.success) this.open();
            },
            deep: true,
        },
    },
    methods: {
        open() {
            const vm = this;
            vm.show = true;
            setTimeout(() => {
                vm.show = false;
                this.$page.props.flash.success = null;
            }, 5000);
        },
        close() {
            this.show = false;
        },
    },
    mounted() {
        if (this.$page.props.flash.success) {
            this.open();
        }
    },
};
</script>
