import { Fragment, h } from "@stencil/core";
import { configStore } from "../../store/store";
import { useTranslation } from "../../utils/utils";
import { Icon } from "../internal-component/icon";
import { ZButton } from "../internal-component/z-button";
import { isValidVideoUrl } from "../../utils/validators";
export class QuickMessageVideoContentComponent {
    content;
    contentChange;
    videoUrl = '';
    isDialogOpen = false;
    errorMessage;
    emitContent(update) {
        if (!this.content) {
            return;
        }
        this.contentChange.emit({ ...this.content, ...update });
    }
    openDialog() {
        const content = this.content;
        this.videoUrl = content ? content.file_url : '';
        this.errorMessage = undefined;
        this.isDialogOpen = true;
    }
    closeDialog() {
        this.isDialogOpen = false;
    }
    handleUrlInput(event) {
        this.videoUrl = event.target.value;
        if (this.errorMessage) {
            this.errorMessage = undefined;
        }
    }
    validateVideoUrl(url, assignError = true) {
        const t = useTranslation();
        if (!url.trim()) {
            if (assignError) {
                this.errorMessage = t('quick_message.video_link_required');
            }
            return false;
        }
        if (!isValidVideoUrl(url)) {
            if (assignError) {
                this.errorMessage = t('quick_message.video_link_invalid');
            }
            return false;
        }
        if (assignError) {
            this.errorMessage = undefined;
        }
        return true;
    }
    handleSaveVideo() {
        const trimmed = this.videoUrl.trim();
        if (!this.validateVideoUrl(trimmed)) {
            return;
        }
        this.emitContent({ file_url: trimmed });
        this.closeDialog();
    }
    buildVideoPreview(url) {
        try {
            const parsed = new URL(url);
            if (/\.(mp4|webm|ogg)$/i.test(parsed.pathname)) {
                return { type: 'video', src: url };
            }
        }
        catch (e) {
            // fall back below
        }
        return { type: 'video', src: url };
    }
    render() {
        if (!this.content) {
            return null;
        }
        const theme = configStore.get('theme');
        const t = useTranslation();
        const existingUrl = this.content.file_url;
        const hasVideo = !!existingUrl;
        const previewData = hasVideo && existingUrl ? this.buildVideoPreview(existingUrl) : undefined;
        return (h("div", { class: "flex justify-end", "data-theme": theme }, h("div", { class: "max-w-xs h-[220px] aspect-square" }, h("button", { type: "button", class: "group relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm transition-colors cursor-pointer border-primary", onClick: () => this.openDialog() }, previewData ? (h(Fragment, null, h("video", { src: previewData.src, preload: "metadata", class: "h-[220px] object-cover", controls: true }, h("track", { kind: "captions", src: "", label: "English" })), 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(Icon, { name: "Edit", addClass: "size-6 text-white" }), h("span", { class: "text-sm font-semibold text-white" }, t('quick_message.change_video_link'))))) : (h("div", { class: "flex flex-col items-center gap-2 px-6 text-center" }, h(Icon, { name: "Play", addClass: "size-14 text-primary" }), h("span", { class: "text-base font-semibold leading-tight text-primary" }, "+ ", t('quick_message.add_video'))))), this.isDialogOpen && this.renderDialog(t))));
    }
    renderDialog(t) {
        return (h("div", { class: "fixed inset-0 z-(--quick-message-modal-dialog-z-index,2147483010) flex items-center justify-center bg-slate-900/40 px-4", onClick: () => this.closeDialog() }, h("div", { class: "w-full max-w-md rounded-2xl border bg-background p-6 shadow-xl text-surface border-none", onClick: event => event.stopPropagation() }, h("div", { class: "flex items-start justify-between" }, h("h3", { class: "text-base font-semibold" }, t('quick_message.add_video')), h("button", { type: "button", class: "inline-flex cursor-pointer items-center justify-center rounded-full p-1", onClick: () => this.closeDialog() }, h(Icon, { name: "X" }))), h("div", { class: "mt-4 flex flex-col gap-4" }, h("label", { class: "flex flex-col gap-2 text-sm font-medium" }, t('quick_message.link_video'), h("input", { type: "url", value: this.videoUrl, placeholder: t('quick_message.type_video_link_here'), class: "rounded-xl border px-3 py-2 text-sm focus:outline-none ring-primary border-primary bg-background", onInput: event => this.handleUrlInput(event) })), this.errorMessage && h("p", { class: "text-xs text-red-500" }, this.errorMessage)), h("div", { class: "mt-6 flex gap-3" }, h(ZButton, { variant: "outlined", onClick: () => this.closeDialog(), fullWidth: true, label: t('cancel') }), h(ZButton, { variant: "primary", onClick: () => this.handleSaveVideo(), fullWidth: true, disabled: (this.videoUrl ? this.videoUrl.trim() : '') === '', label: t('save') })))));
    }
    static get is() { return "quick-message-video-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 {
            "videoUrl": {},
            "isDialogOpen": {},
            "errorMessage": {}
        };
    }
    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"
                        }
                    }
                }
            }];
    }
}
