/* 縮小失敗。正在傳回未縮小的內容。
(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('
(95,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) {
            // 決定通知位置
            const direction = Object.hasOwn(options, 'direction')
                ? options.direction
                : 'top-right';
            this.direction = direction;

            // center 位置樣式固定單筆顯示，避免堆疊造成視覺混淆
            const requestedStack = Object.hasOwn(options, 'stack')
                ? options.stack
                : true;
            const isStack = direction === 'center' ? false : requestedStack;
            if (!isStack) {
                this.notifications = [];
            }

            // persistent: true 時不做 timeout 自動關閉
            const persistent = Object.hasOwn(options, 'persistent')
                ? !!options.persistent
                : false;

            const timeout = Object.hasOwn(options, 'timeout')
                ? this.parseTimeout(options.timeout)
                : 3000;

            // closable: 是否顯示關閉按鈕，常駐通知預設顯示
            const closable = Object.hasOwn(options, 'closable')
                ? !!options.closable
                : persistent;

            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: persistent ? 0 : timeout,
                closable: closable,
                persistent: persistent,
                // stack 由 content service 判斷是否啟用點擊外部關閉
                stack: isStack,
            };
        },
        // timeout 轉為正整數，無效值一律視為 0
        parseTimeout(timeout) {
            const parsed = parseInt(timeout, 10);
            return !isNaN(parsed) && parsed > 0 ? parsed : 0;
        },
        // 通知
        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 = [];
        },
    },
});