import { Host, h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { Icon } from "../internal-component/icon";
export class QuickMessageModal {
    isOpen = true;
    isZignal = true;
    activeTab = 'template';
    mountedTabs = ['template'];
    templates = [];
    images = [];
    files = [];
    close;
    sendQuickMessageLibrary;
    sendTemplate;
    handleClose = () => {
        this.close.emit();
    };
    setTab(tab) {
        if (!this.mountedTabs.includes(tab)) {
            this.mountedTabs = [...this.mountedTabs, tab];
        }
        this.activeTab = tab;
    }
    hasMountedTab(tab) {
        return this.mountedTabs.includes(tab);
    }
    cloneTemplates(templates) {
        return (templates || []).map(template => {
            const rawContents = template.contents || [];
            const normalizedContents = rawContents.map(content => {
                const rawMenuList = content.menu_list || [];
                const menuList = rawMenuList.map(menu => ({
                    ...menu,
                    buttons: (menu.buttons || []).map(button => ({ ...button })),
                }));
                return {
                    ...content,
                    buttons: (content.buttons || []).map(button => ({ ...button })),
                    menu_list: menuList,
                    menuList,
                };
            });
            return {
                ...template,
                content: normalizedContents,
            };
        });
    }
    cloneLibrary(library) {
        return (library || []).map(item => ({
            ...item,
            isSelected: item.isSelected || false,
        }));
    }
    handleTemplatesChange(event) {
        this.templates = this.cloneTemplates(event.detail || []);
    }
    handleImagesChange(event) {
        this.images = this.cloneLibrary(event.detail || []);
    }
    handleFilesChange(event) {
        this.files = this.cloneLibrary(event.detail || []);
    }
    handleTemplateSend(event) {
        this.sendTemplate.emit(event.detail);
    }
    handleImageSend(event) {
        this.sendQuickMessageLibrary.emit({ type: 'image', items: this.cloneLibrary(event.detail || []) });
    }
    handleFileSend(event) {
        this.sendQuickMessageLibrary.emit({ type: 'file', items: this.cloneLibrary(event.detail || []) });
    }
    render() {
        const t = useTranslation();
        return (h(Host, { key: '77a5bbf54d49067d6de554a5cfa4397d04610924', class: this.isOpen ? undefined : 'quick-message-modal--hidden', "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { key: '4d01de78558d74bf2894a49710716e676265251a', class: "quick-message-overlay", onClick: () => this.handleClose() }, h("div", { key: 'de048128cc1a16562524e5a28c314dcbc234d5ad', class: "quick-message-container bg-background text-surface", onClick: event => event.stopPropagation() }, h("header", { key: 'afbcc919bc07b622dd8e7257335e3dcfc6a02441', class: "modal-header" }, h("h2", { key: '0db68eb8df0ab5b66dc9577c03cddc6b84e500ae' }, t('quick_message.title')), h("button", { key: '4f0ae0d101678f8090aad687250a14cb80c9543f', class: "close-button", type: "button", onClick: () => this.handleClose() }, h(Icon, { key: '4bb5a9e3525e5ef3539457432d584302dfac4462', name: "X" }))), h("nav", { key: 'a1460ac6befa75b2f250182fea7b2ca40884c887', class: "tab-header text-sm" }, h("button", { key: 'c8647de52dc878b216a8f09df216c3fb957262ef', class: this.activeTab === 'template' ? 'active' : '', type: "button", onClick: () => this.setTab('template') }, t('quick_message.tab_template')), h("button", { key: '5a5077e4ed0ed284da80eb945525efbf60a7adf4', class: this.activeTab === 'image' ? 'active' : '', type: "button", onClick: () => this.setTab('image') }, t('image')), h("button", { key: '888ff2342cdb5552b8834605594c9a17c7cb6e05', class: this.activeTab === 'file' ? 'active' : '', type: "button", onClick: () => this.setTab('file') }, t('file'))), h("section", { key: '5f83d1e4e029665714a2564f1825936f5161fe89', class: "tab-content" }, h("div", { key: '4c85d50dadc4a1e3763de8f934d084bda704bcb5', class: this.activeTab === 'template' ? 'tab-panel' : 'tab-panel tab-panel--hidden' }, this.hasMountedTab('template') && (h("quick-message-template", { key: '2c8d4965ef4d708460a182177fe7977ad6565ad6', handleClose: this.handleClose, value: this.templates, onTemplatesChange: event => this.handleTemplatesChange(event), onSendTemplate: event => this.handleTemplateSend(event), isZignal: this.isZignal }))), h("div", { key: '129ff693a7a132bed9b421adf4e09bd2f0c6d955', class: this.activeTab === 'image' ? 'tab-panel' : 'tab-panel tab-panel--hidden' }, this.hasMountedTab('image') && (h("quick-message-image", { key: 'f664278fe354167d4349cceac89ad0dcf2810c00', handleClose: this.handleClose, value: this.images, onImagesChange: event => this.handleImagesChange(event), onSendImages: event => this.handleImageSend(event) }))), h("div", { key: 'b06a56c71ca90421981729b334dd3cafa6ad3267', class: this.activeTab === 'file' ? 'tab-panel' : 'tab-panel tab-panel--hidden' }, this.hasMountedTab('file') && (h("quick-message-file", { key: '2406edcc67a0e0f91b78fb829d7d16b916e0ca39', handleClose: this.handleClose, value: this.files, onFilesChange: event => this.handleFilesChange(event), onSendFiles: event => this.handleFileSend(event) }))))))));
    }
    static get is() { return "quick-message-modal"; }
    static get originalStyleUrls() {
        return {
            "$": ["quick-message-modal.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["quick-message-modal.css"]
        };
    }
    static get properties() {
        return {
            "isOpen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-open",
                "defaultValue": "true"
            },
            "isZignal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-zignal",
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "activeTab": {},
            "mountedTabs": {},
            "templates": {},
            "images": {},
            "files": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "sendQuickMessageLibrary",
                "name": "sendQuickMessageLibrary",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ type: 'image' | 'file'; items: QuickMessageLibraryFile[] }",
                    "resolved": "{ type: \"image\" | \"file\"; items: QuickMessageLibraryFile[]; }",
                    "references": {
                        "QuickMessageLibraryFile": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::QuickMessageLibraryFile",
                            "referenceLocation": "QuickMessageLibraryFile"
                        }
                    }
                }
            }, {
                "method": "sendTemplate",
                "name": "sendTemplate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "QuickMessageTemplateModel",
                    "resolved": "{ id: string; title: string; contents: QuickMessageTemplateContent[]; created_at?: string | Date; created_by?: string; last_updated_at: string | Date; last_updated_by: string; isExpanded?: boolean; }",
                    "references": {
                        "QuickMessageTemplateModel": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::QuickMessageTemplate",
                            "referenceLocation": "QuickMessageTemplate"
                        }
                    }
                }
            }];
    }
}
