import { Store } from "./storage";
const themeModeStorageKey = 'ui.theme.mode';
const breakpoints = {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
};
export class ThemeService {
    /**
     * Init service
     *
     * @param mode
     */
    constructor(mode = 'light') {
        this.mode = mode;
        /**
         * Window width size
         */
        this.width = 0;
        /**
         * Window height size
         */
        this.height = 0;
        /**
         * Bootstrap breakpoint size
         */
        this.size = 'xs';
        if (Store.get(themeModeStorageKey)) {
            this.switch(Store.get(themeModeStorageKey));
        }
        else {
            this.autodetectTheme();
        }
        this.setupSizes(document.documentElement.clientWidth, document.documentElement.clientHeight);
        this.isMobile() && document.querySelector("body").classList.add("is-mobile");
        window.addEventListener('resize', () => {
            this.setupSizes(document.documentElement.clientWidth, document.documentElement.clientHeight);
        });
    }
    /**
     * Detect if the current device is a mobile device
     *
     * @returns boolean
     */
    isMobile() {
        const toMatch = [
            /Android/i,
            /webOS/i,
            /iPhone/i,
            /iPad/i,
            /iPod/i,
            /BlackBerry/i,
            /Windows Phone/i
        ];
        const byAgent = toMatch.some((toMatchItem) => {
            return toMatchItem.exec(navigator.userAgent);
        });
        const bySize = Math.min(document.documentElement.clientWidth, document.documentElement.clientHeight) <= breakpoints.sm;
        return byAgent || bySize;
    }
    /**
     * Toggle theme type between `light` & `dark`
     */
    toggle() {
        this.switch(this.mode === 'dark' ? 'light' : 'dark');
    }
    /**
     * Validate if modal is open
     */
    validateModals() {
        if (typeof document !== 'undefined') {
            setTimeout(() => {
                const modalsOpen = Boolean(document.querySelector('x-overlay-container x-modal.modal-show'));
                if (modalsOpen) {
                    document.querySelector("body").classList.add("modal-open");
                }
                else {
                    document.querySelector("body").classList.remove("modal-open");
                }
            }, 100);
        }
    }
    /**
     * Verify if size types is actual size
     *
     * @param sizes
     * @returns
     */
    is(...sizes) {
        if (Array.isArray(sizes)) {
            return sizes.includes(this.size);
        }
        return false;
    }
    /**
     * Get actual theme
     *
     * @returns
     */
    getTheme() {
        return this.mode;
    }
    /**
     * Detect browser|device|user actual theme
     */
    autodetectTheme() {
        this.switch(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light');
    }
    /**
     * Init and discover breakpoint sizes
     *
     * @param width
     * @param height
     */
    setupSizes(width, height) {
        this.width = width;
        this.height = height;
        this.size = this.getSizeByWidth(width);
        if (this.isMobile()) {
            document.querySelector("body").classList.add("is-mobile");
        }
        else {
            document.querySelector("body").classList.remove("is-mobile");
        }
    }
    /**
     * Get the bootstrap size key by window size
     *
     * @param width
     * @returns
     */
    getSizeByWidth(width) {
        if (width >= breakpoints.xl) {
            return 'xl';
        }
        if (width >= breakpoints.lg) {
            return 'lg';
        }
        if (width >= breakpoints.md) {
            return 'md';
        }
        if (width >= breakpoints.sm) {
            return 'sm';
        }
        return 'xs';
    }
    /**
     * Change actual theme
     *
     * @param theme
     */
    switch(theme) {
        if (theme == "dark" && document) {
            this.mode = theme;
            document.querySelector("body").classList.add("is-dark-mode");
            Store.set(themeModeStorageKey, theme);
        }
        if (theme == "light" && document) {
            this.mode = theme;
            document.querySelector("body").classList.remove("is-dark-mode");
            Store.set(themeModeStorageKey, theme);
        }
    }
    /**
     * Create service
     *
     * @returns
     */
    static create() {
        const instance = new ThemeService();
        return Object.assign((theme) => instance.switch(theme), {
            toggle: () => instance.toggle(),
            validateModals: () => instance.validateModals(),
            is: (...sizes) => instance.is(...sizes),
            isMobile: () => instance.isMobile(),
            getTheme: () => instance.getTheme(),
            autodetectTheme: () => instance.autodetectTheme(),
            size: instance.size,
        });
    }
}
export const Theme = ThemeService.create();
export const Query = (name, parent) => { var _a; return (_a = (parent || document).querySelector(`[ref="${name}"]`)) !== null && _a !== void 0 ? _a : (parent || document).querySelector(name); };
