import { h } from "@stencil/core";
import { configStore } from "../../store/store";
import { useTranslation } from "../../utils/utils";
import { Icon } from "../internal-component/icon";
import { MediaSkeleton } from "../internal-component/media-skeleton";
import { MAX_FILE_SIZE } from "../../utils/constant";
export class QuickMessageImageContentComponent {
    content;
    contentChange;
    errorMessage;
    isLoaded = false;
    fileInput;
    emitContent(update) {
        if (!this.content) {
            return;
        }
        const nextContent = { ...this.content, ...update };
        this.contentChange.emit(nextContent);
    }
    handleSelectClick = () => {
        if (this.fileInput)
            this.fileInput.click();
    };
    handleFileChange = (event) => {
        const input = event.target;
        const files = input.files;
        if (!files) {
            return;
        }
        const file = files[0];
        if (!file) {
            return;
        }
        if (file.size > MAX_FILE_SIZE) {
            this.errorMessage = useTranslation()('quick_message.image_too_large');
            input.value = '';
            return;
        }
        const reader = new FileReader();
        reader.onload = () => {
            const url = reader.result;
            this.emitContent({ file_url: url });
            this.errorMessage = undefined;
            input.value = '';
        };
        reader.readAsDataURL(file);
    };
    handleRemoveImage = () => {
        this.emitContent({ file_url: '' });
        this.errorMessage = undefined;
        this.isLoaded = false;
    };
    handleImageLoad = () => {
        this.isLoaded = true;
    };
    render() {
        if (!this.content) {
            return null;
        }
        const theme = configStore.get('theme');
        const t = useTranslation();
        const preview = this.content.file_url || this.content.file?.url;
        const borderClass = `border-primary`;
        const primaryTextClass = `text-primary`;
        const grayTextClass = `text-theme-gray`;
        return (h("div", { class: "flex justify-end", "data-theme": theme }, h("div", { class: "max-w-xs h-[220px] aspect-square" }, h("input", { type: "file", accept: "image/*", class: "hidden", ref: el => (this.fileInput = el), onChange: this.handleFileChange }), preview ? (h("div", { class: `group h-[220px] relative w-full overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm ${borderClass}` }, !this.isLoaded && (h(MediaSkeleton, null)), h("img", { src: preview, alt: "preview-message-image", class: "h-[220px] w-full object-cover", onLoad: this.handleImageLoad, style: { animation: 'z-fadeIn 0.3s ease-in-out' }, loading: "lazy" }), h("div", { class: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h("button", { type: "button", class: `inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-slate-700 shadow cursor-pointer`, onClick: this.handleSelectClick }, h(Icon, { name: "Image", addClass: `size-4 text-surface` }), h("span", { class: `text-surface` }, t('quick_message.change_image'))), h("button", { type: "button", class: `inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-red-500 shadow cursor-pointer`, onClick: this.handleRemoveImage }, h(Icon, { name: "Trash2", addClass: "size-4" }), h("span", { class: "text-red-500" }, t('remove')))))) : (h("button", { type: "button", class: `flex w-full flex-col items-center justify-center gap-2 rounded-[18px] border-[1.5px] border-current bg-background px-8 py-12 text-center shadow-sm transition-colors hover:bg-background ${borderClass} cursor-pointer`, onClick: this.handleSelectClick }, h(Icon, { name: "Image", addClass: `size-12 ${primaryTextClass}` }), h("span", { class: `text-base font-semibold leading-tight ${primaryTextClass}` }, "+ ", t('quick_message.add_image')), h("span", { class: `text-[13px] font-medium ${grayTextClass}` }, t('quick_message.image_size_hint')))), this.errorMessage && h("p", { class: "mt-2 text-xs text-red-500" }, this.errorMessage))));
    }
    static get is() { return "quick-message-image-content"; }
    static get properties() {
        return {
            "content": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "QuickMessageTemplateContent",
                    "resolved": "{ id: string; type: QuickMessageTemplateContentType; text?: string; buttons: QuickMessageTemplateButton[]; file_url?: string; file?: FileMessage; menu_list: QuickMessageTemplateMenuListItem[]; sequence?: number; }",
                    "references": {
                        "QuickMessageTemplateContent": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::QuickMessageTemplateContent",
                            "referenceLocation": "QuickMessageTemplateContent"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "errorMessage": {},
            "isLoaded": {}
        };
    }
    static get events() {
        return [{
                "method": "contentChange",
                "name": "contentChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "QuickMessageTemplateContent",
                    "resolved": "{ id: string; type: QuickMessageTemplateContentType; text?: string; buttons: QuickMessageTemplateButton[]; file_url?: string; file?: FileMessage; menu_list: QuickMessageTemplateMenuListItem[]; sequence?: number; }",
                    "references": {
                        "QuickMessageTemplateContent": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::QuickMessageTemplateContent",
                            "referenceLocation": "QuickMessageTemplateContent"
                        }
                    }
                }
            }];
    }
}
