import { getNotificationContainerElement } from "../utils/helpers";
import { Lang } from "./lang";
import { Theme } from "./theme";
const MAX_ELEMENTS_ON_CONTAINER = 4;
export class NotificationService {
    constructor(topContainer = null, bottomContainer = null) {
        this.topContainer = topContainer;
        this.bottomContainer = bottomContainer;
        this.topContainer = getNotificationContainerElement('top');
        this.bottomContainer = getNotificationContainerElement('bottom');
    }
    call(options) {
        if (typeof options === 'string') {
            this.prepareNotification({
                message: options,
            });
        }
        else {
            this.prepareNotification(options);
        }
    }
    calculateItemsByPosition(position) {
        if (this.topContainer && position === 'top') {
            const count = this.topContainer.childElementCount;
            this.topContainer.classList.remove('more-odd', 'more-even');
            count > 1 && this.topContainer.classList.add('more-odd');
            count > 2 && this.topContainer.classList.add('more-even');
        }
        if (this.bottomContainer && position === 'bottom') {
            const count = this.bottomContainer.childElementCount;
            this.bottomContainer.classList.remove('more-odd', 'more-even');
            count > 1 && this.bottomContainer.classList.add('more-odd');
            count > 2 && this.bottomContainer.classList.add('more-even');
        }
    }
    shouldQueue(options) {
        if (!this.topContainer && options.position === 'top') {
            this.topContainer = getNotificationContainerElement('top');
            this.topContainer.addEventListener('slotchange', () => console.log('change'));
        }
        if (!this.bottomContainer && options.position === 'bottom') {
            this.bottomContainer = getNotificationContainerElement('bottom');
        }
        return (options.position === 'bottom' ? this.bottomContainer : this.topContainer).childElementCount >= (Theme.isMobile() ? 1 : MAX_ELEMENTS_ON_CONTAINER);
    }
    prepareNotification(options) {
        var _a;
        if (this.shouldQueue(options)) {
            setTimeout(() => this.prepareNotification(options), 250);
        }
        else {
            const el = document.createElement('x-notification');
            if (options.label) {
                const label = document.createElement('h4');
                label.innerText = options.label;
                el.appendChild(label);
            }
            if (options.onclose) {
                el.addEventListener('close', options.onclose);
            }
            const message = document.createElement('p');
            message.innerHTML = options.message;
            el.appendChild(message);
            options.color && el.setAttribute('color', options.color);
            options.icon && el.setAttribute('icon', options.icon);
            options.interval && el.setAttribute('interval', options.interval.toString());
            (options.position === 'bottom' ? this.bottomContainer : this.topContainer).insertAdjacentElement('afterbegin', el);
            this.calculateItemsByPosition((_a = options.position) !== null && _a !== void 0 ? _a : 'top');
        }
    }
    success(message, label, icon, interval) {
        this.prepareNotification({
            color: 'success',
            label: label || Lang('alert.success'),
            message,
            icon,
            interval,
        });
    }
    fail(message, label, icon, interval) {
        this.prepareNotification({
            color: 'danger',
            label: label || Lang('alert.danger'),
            message,
            icon,
            interval,
        });
    }
    static create() {
        const instance = new NotificationService();
        return Object.assign((options) => instance.call(options), {
            success: (message, label, icon, interval) => instance.success(message, label, icon, interval),
            fail: (message, label, icon, interval) => instance.fail(message, label, icon, interval)
        });
    }
}
export const Notification = NotificationService.create();
