import { Host, h } from "@stencil/core";
import { configStore, selectedChatStore } from "../../store/store";
import { BASE_ZWIZ_QUICK_MESSAGE_URL } from "../../utils/constant";
import { getSessionToken } from "../../api";
import { handleError } from "../../store/dialog";
export class ZwizQuickMessageModal {
    connection;
    token;
    templateSent;
    baseUrl = BASE_ZWIZ_QUICK_MESSAGE_URL();
    handleMessage = (event) => {
        if (event.origin !== this.baseUrl)
            return;
        const { event_id } = event.data || {};
        if (event_id === 'quick_message_template_sent') {
            this.templateSent.emit();
        }
        if (event_id === 'quick_message_template_error') {
            handleError(null, 'quick_message.send_error');
        }
        if (event_id === 'session_expired') {
            handleError(null, 'session_expired');
        }
    };
    async componentWillLoad() {
        const selectedChat = selectedChatStore.get('selectedChat');
        if (!selectedChat)
            return;
        const connectionId = selectedChat.connection.id;
        const _connection = configStore.get('connectionList').find(connection => connection.type === 'zwiz' && connection.platform === 'sme' && connection.channels?.find(channel => channel.id === connectionId));
        this.connection = _connection;
        if (_connection.type === 'zwiz') {
            const userToken = await getSessionToken({
                connectionId,
                botId: _connection.bot_id,
                channel: selectedChat.channel,
                type: selectedChat.type,
                userId: selectedChat.user?.id,
                groupId: selectedChat.group?.id,
            });
            this.token = userToken;
        }
    }
    componentDidLoad() {
        window.addEventListener('message', this.handleMessage);
    }
    disconnectedCallback() {
        window.removeEventListener('message', this.handleMessage);
    }
    render() {
        const theme = configStore.get('theme');
        const selectedChat = selectedChatStore.get('selectedChat');
        const botId = this.connection.type === 'zwiz' ? this.connection.bot_id : '';
        return (h(Host, { key: 'bdebda489bc7c54b42e67a1fb3cb5f86de4fcf72', class: "relative flex min-h-0 flex-1 flex-col gap-2", "data-theme": theme }, h("section", { key: '1e50b7c7f1cbbefdac0ec8eea7fcc9cf35354731', class: "zwiz-qm-content" }, h("iframe", { key: 'f4ef21ae300abea6764486b894d5cb156b0f6574', src: `${this.baseUrl}/${configStore.get('language')}/zwiz-quick-message?token=${this.token.sessiontoken}&pageid=${botId}&adminid=${this.token.adminid}&userid=${this.token.userid || ''}&groupid=${this.token.groupid || ''}&app=${selectedChat.channel}`, class: "zwiz-qm-iframe", sandbox: "allow-popups allow-forms allow-same-origin allow-scripts allow-top-navigation allow-popups-to-escape-sandbox allow-downloads", allowFullScreen: true }))));
    }
    static get is() { return "zwiz-quick-message-modal"; }
    static get originalStyleUrls() {
        return {
            "$": ["zwiz-quick-message-modal.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["zwiz-quick-message-modal.css"]
        };
    }
    static get states() {
        return {
            "connection": {},
            "token": {}
        };
    }
    static get events() {
        return [{
                "method": "templateSent",
                "name": "templateSent",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
}
