import { Host, h } from "@stencil/core";
import { configStore, selectedChatStore, userInfosStore, userStore } from "../../store/store";
import { BASE_ZDESK_QUICK_MESSAGE_URL } from "../../utils/constant";
import { encryptToken } from "../../utils/crypto";
import { handleError } from "../../store/dialog";
export class ZDeskQuickMessageModal {
    connection;
    templateSent;
    baseUrl = BASE_ZDESK_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 === 'enterprise' && connection.channels?.find(channel => channel.id === connectionId));
        this.connection = _connection;
    }
    componentDidLoad() {
        window.addEventListener('message', this.handleMessage);
    }
    disconnectedCallback() {
        window.removeEventListener('message', this.handleMessage);
    }
    render() {
        const theme = configStore.get('theme');
        const user = userStore.get('user');
        const userInfo = userInfosStore.get(this.connection.id);
        const zdeskBusinessId = this.connection.type === 'zwiz' ? this.connection.bot_id : '';
        const encryptedToken = userInfo.token ? encryptToken(userInfo.token, zdeskBusinessId) : '';
        const url = `${this.baseUrl}/${configStore.get('language')}/iframe/quick-message-template?mode=iframe&source=zignal&business_id=${zdeskBusinessId}&customer_id=${user.id.toString()}&token=${encodeURIComponent(encryptedToken)}`;
        const ticketId = ''; //Assign select ticket_id here
        if (ticketId) {
            // Ticket id is optional for ZDesk Quick Message. If not assign, it will be create new ticket by zdesk flow.
            url.concat(`&ticket_id=${ticketId}`);
        }
        return (h(Host, { key: '4928fca6139a3c218ecfcf5945c844d5415fd2c8', class: "relative flex min-h-0 flex-1 flex-col gap-2", "data-theme": theme }, h("section", { key: '9825e8cc48ba10506a3ddc2544d6af3aa7754ffd', class: "zdesk-qm-content" }, h("iframe", { key: '66f513a0b03b2a9cf0f2ffea3c96e510aa726e3f', src: url, class: "zdesk-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 "zdesk-quick-message-modal"; }
    static get originalStyleUrls() {
        return {
            "$": ["zdesk-quick-message-modal.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["zdesk-quick-message-modal.css"]
        };
    }
    static get states() {
        return {
            "connection": {}
        };
    }
    static get events() {
        return [{
                "method": "templateSent",
                "name": "templateSent",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
}
