/* 縮小失敗。正在傳回未縮小的內容。
(1,5): run-time error CSS1030: Expected identifier, found 'component('
(1,5): run-time error CSS1031: Expected selector, found 'component('
(1,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(69,2): run-time error CSS1019: Unexpected token, found ')'
(71,5): run-time error CSS1030: Expected identifier, found 'component('
(71,5): run-time error CSS1031: Expected selector, found 'component('
(71,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(170,2): run-time error CSS1019: Unexpected token, found ')'
 */
Vue.component('gh-notification', {
    template: `
        <div :class="['notification-wrapper', direction]">
            <div class="notification-container">
                <gh-notification-content
                    v-for="(notification, index) in notifications"
                    :key="notification.id"
                    v-bind="notification"
                    :direction="direction"
                    @close="removeNotification(notification.id)"
                ></gh-notification-content>
            </div>
        </div>
    `,
    data() {
        return {
            notifications: [],
            direction: 'top-right',
        };
    },
    methods: {
        // 初始化
        init(options = {}, type) {
            // 決定通知位置
            this.direction = Object.hasOwn(options, 'direction') ? options.direction : 'top-right';

            // 清空現有通知，確保只有一個通知
            const isStack = Object.hasOwn(options, 'stack') ? options.stack : true;
            if (!isStack) {
                this.notifications = [];
            }

            return {
                id: crypto.randomUUID(),
                type: type,
                title: Object.hasOwn(options, 'title') ? options.title : '',
                body: Object.hasOwn(options, 'body') ? options.body : '',
                icon: Object.hasOwn(options, 'icon') ? options.icon : '',
                timeout: Object.hasOwn(options, 'timeout') ? parseInt(options.timeout) : 3000,
                closable: Object.hasOwn(options, 'closable') ? !!options.closable : false,
                persistent: Object.hasOwn(options, 'persistent') ? !!options.persistent : false,
                closeOnClickOutside: Object.hasOwn(options, 'closeOnClickOutside') ? !!options.closeOnClickOutside : true, // 是否啟用點擊外部關閉，默認啟用
            };
        },
        // 通知
        notify(options = {}) {
            const opts = this.init(options, 'basic');
            this.notifications.push(opts);
        },
        // 警告
        warn(options = {}) {
            const opts = this.init(options, 'warning');
            this.notifications.push(opts);
        },
        // 錯誤
        error(options = {}) {
            const opts = this.init(options, 'danger');
            this.notifications.push(opts);
        },
        // 移除堆疊
        removeNotification(id) {
            this.notifications = this.notifications.filter((n) => n.id !== id);
        },
        // 關閉所有通知
        clearAll() {
            this.notifications = [];
        },
    },
});

Vue.component('gh-notification-content', {
    template: `
        <div :class="notificationBoxClass" :style="{ opacity: isVisible ? 1 : 0 }" @click.stop >
            <svg-icon
                v-if="icon"
                :icon-name="icon"
                :width="iconSize"
                :height="iconSize"
                :color="iconColor"
                class="icon"
                style="flex-shrink: 0;"
            ></svg-icon>
            <div class="text">
                <p class="title" v-if="title">{{ title }}</p>
                <p class="body">{{ body }}</p>
            </div>
            <span v-if="closable || persistent" class="close-btn" @click="closeNotification">&times;</span>
        </div>
    `,
    data() {
        return {
            isVisible: false,
        };
    },
    props: {
        id: { type: String, required: true },
        type: { type: String, required: true },
        title: { type: String, required: true },
        body: { type: String, required: true },
        icon: { type: String },
        timeout: { type: Number, required: true },
        closable: { type: Boolean, default: false },
        persistent: { type: Boolean, default: false },
        direction: { type: String },
        closeOnClickOutside: { type: Boolean, default: false }
    },
    computed: {
        notificationBoxClass() {
            return ['notification-box', 'notification-' + this.type, this.icon ? 'has-icon' : ''];
        },
        iconSize() {
            return this.direction === 'center' ? '32px' : '20px';
        },
        iconColor() {
            const config = {
                basic: '#ffffff',
                warning: '#f9b207',
                danger: '#ffffff',
            };
            return config[this.type] || '#ffffff';
        }
    },
    methods: {
        // 顯示通知
        showNotification() {
            // 渲染後延遲調整 isVisible，確保淡入效果執行
            setTimeout(() => {
                this.isVisible = true;
            }, 100);

            // 如果不是 persistent，就依 timeout 自動關閉
            if (!this.persistent && this.timeout) {
                setTimeout(() => this.closeNotification(), this.timeout);
            }
        },
        // 關閉通知
        closeNotification() {
            this.isVisible = false;

            // 等動畫後再移除
            setTimeout(() => {
                this.$emit('close');
            }, 300);
        },
        // 處理外部點擊事件
        handleOutsideClick(event) {
            // 檢查點擊是否在通知框外
            const notificationBox = this.$el;
            if (notificationBox && !notificationBox.contains(event.target)) {
                this.closeNotification();
            }
        }
    },
    mounted() {
        this.showNotification();

        // 如果啟用點擊外部關閉功能
        if (this.closeOnClickOutside) {
            setTimeout(() => {
                document.addEventListener('click', this.handleOutsideClick);
            }, 100); // 延遲添加避免立即觸發
        }
    },
    beforeDestroy() {
        // 在組件銷毀前移除事件監聽
        if (this.closeOnClickOutside) {
            document.removeEventListener('click', this.handleOutsideClick);
        }
    },
});