import { Host, h } from "@stencil/core";
import { ZIconButton } from "../internal-component/z-icon-button";
import { deviceModeStore } from "../../store/store";
import { STICKER_PACKAGES } from "../../utils/constant";
import { openDialog } from "../../store/dialog";
import { useTranslation } from "../../utils/utils";
export class DialogSticker {
    close;
    sendSticker;
    packageId = Object.keys(STICKER_PACKAGES)[0];
    handleClose = () => {
        this.close.emit();
    };
    handlePackageChange = (packageId) => {
        this.packageId = packageId;
    };
    getStickerUrl = (stickerId) => {
        return `https://stickershop.line-scdn.net/stickershop/v1/sticker/${stickerId}/android/sticker.png`;
    };
    handlePreviewSticker = (stickerId) => {
        const t = useTranslation();
        openDialog({
            open: true,
            contentCustom: h("div", { class: "dialog-sticker-preview-box" }, h("img", { src: this.getStickerUrl(stickerId), alt: `Preview Sticker ${stickerId}`, class: "dialog-sticker-preview-image" }), h("span", { class: "dialog-sticker-preview-description" }, "Do you want to send this sticker?")),
            buttonName: t('send'),
            cancelButtonName: t('cancel'),
            onSubmitDialog: () => this.handleSendSticker(stickerId),
        });
    };
    handleSendSticker = (stickerId) => {
        this.sendSticker.emit({ packageId: this.packageId, stickerId });
        this.handleClose();
    };
    render() {
        return (h(Host, { key: 'b2819e602d65132964dd0d25fd8de1c6bcfbf502' }, h("div", { key: '281e4ef329479dc90ffdd017877a7da045883997', class: "dialog-backdrop" }, h("div", { key: 'd7255aa4342d1da26f4ab294d441f6b59f54257a', class: `dialog-wrapper ${deviceModeStore.get('mode') === 'mobile' ? 'w-xs' : 'min-w-md w-xl'}` }, h("div", { key: 'e44f7312be0b5e87c814fc76b1e1b3e0fa5b7416', class: "dialog-header" }, h("h2", { key: '31e331084f4526a66b57ad8c269e60c750c5e4f0', class: "dialog-title" }, "Sticker"), h("div", { key: 'a7d12fc247a068c48d7d2c567e9d3abe7c928aab', class: "dialog-close" }, h(ZIconButton, { key: 'c8f15be5fb2218faaf45134000f9daa31c39b7b9', iconName: "X", variant: "none", onClick: this.handleClose }))), h("div", { key: '47cb45b3bf632ec435085739f610304a2ac06cd0', class: "divider" }), h("div", { key: 'c28c2f3bfc53b28e92f4be8c46ae356f9fc05a6f', class: "dialog-package-selector" }, Object.entries(STICKER_PACKAGES).map(([packageId, stickers]) => {
            const stickerId = stickers[0].toString();
            return (h("button", { key: packageId, class: `dialog-package-selector-item ${this.packageId === packageId ? 'active' : ''}`, onClick: () => this.handlePackageChange(packageId) }, h("img", { src: this.getStickerUrl(stickerId), alt: `Sticker ${stickerId}`, class: "dialog-sticker-selector-item-image" })));
        })), h("div", { key: '89e9ae53a3c98f6cdb65aed6154a35626bc27c3c', class: "divider" }), h("div", { key: '30d434be9193238e616f94ba4749b5824dd54226', class: "dialog-sticker-body" }, STICKER_PACKAGES[this.packageId].map((stickerId) => (h("button", { key: stickerId, class: "dialog-sticker-item", onClick: () => this.handlePreviewSticker(stickerId.toString()) }, h("img", { src: this.getStickerUrl(stickerId.toString()), alt: `Sticker ${stickerId}`, class: "dialog-sticker-item-image" })))))))));
    }
    static get is() { return "dialog-sticker"; }
    static get originalStyleUrls() {
        return {
            "$": ["dialog-sticker.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dialog-sticker.css"]
        };
    }
    static get states() {
        return {
            "packageId": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "sendSticker",
                "name": "sendSticker",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ packageId: string; stickerId: string }",
                    "resolved": "{ packageId: string; stickerId: string; }",
                    "references": {}
                }
            }];
    }
}
