import { h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { openDialog, closeDialog } from "../../store/dialog";
import { Icon } from "../internal-component/icon";
import { configStore } from "../../store/store";
export class WarningNotificationPermissionComponent {
    message;
    t = useTranslation();
    getNotificationSettingsURL = () => {
        const userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.includes('chrome'))
            return 'chrome://settings/content/notifications';
        if (userAgent.includes('edge'))
            return 'edge://settings/content/notifications';
        if (userAgent.includes('firefox'))
            return 'about:preferences#privacy';
        return '';
    };
    tryOpenBrowserSettings = (url) => {
        const newWindow = window.open(url, '_blank');
        if (!newWindow) {
            // Browser blocked the popup
            openDialog({
                open: true,
                title: this.t('notification_warning.cannot_open'),
                contentCustom: (h("p", null, this.t('notification_warning.please_go_to'), h("br", null), h("strong", null, url), h("br", null), this.t('notification_warning.in_your_browser_settings'))),
                type: "ERROR" /* DIALOG_TYPE.ERROR */,
                onCloseDialog: closeDialog,
            });
        }
    };
    handleRequestPermission = async () => {
        if ('Notification' in window) {
            if (Notification.permission === 'default') {
                const result = await Notification.requestPermission();
                if (result === 'granted') {
                    configStore.set('isShowWarningNotification', false);
                }
            }
            else if (Notification.permission === 'denied') {
                const url = this.getNotificationSettingsURL();
                if (url) {
                    this.tryOpenBrowserSettings(url);
                }
                else {
                    openDialog({
                        open: true,
                        title: this.t('notification_warning.please_open_your_browser_settings'),
                        type: "ERROR" /* DIALOG_TYPE.ERROR */,
                        onCloseDialog: closeDialog,
                    });
                }
            }
        }
        else {
            openDialog({
                open: true,
                title: this.t('notification_warning.not_supported'),
                type: "ERROR" /* DIALOG_TYPE.ERROR */,
                onCloseDialog: closeDialog,
            });
        }
    };
    render() {
        const isShow = configStore.get('isShowWarningNotification');
        const lang = configStore.get('language');
        if (!isShow)
            return null;
        return (h("div", { class: "flex items-center justify-center gap-2 bg-primary p-2 text-white" }, h(Icon, { name: "TriangleAlert", addClass: "size-5 text-white" }), h("div", { class: "text-sm font-medium" }, this.t('notification_warning.browser_notifications_disabled'), "\u00A0", h("span", { class: "cursor-pointer underline", onClick: this.handleRequestPermission }, this.t('notification_warning.click'), lang === 'th' ? '' : ' ', this.t('notification_warning.here')))));
    }
    static get is() { return "warning-notification-permission"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["warning-notification-permission.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["warning-notification-permission.css"]
        };
    }
    static get properties() {
        return {
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "message"
            }
        };
    }
}
