import { Host, h } from "@stencil/core";
import { deviceModeStore } from "../../store/store";
import { ZIconButton } from "../internal-component/z-icon-button";
import { Icon } from "../internal-component/icon";
import { MediaSkeleton } from "../internal-component/media-skeleton";
export class DialogPreviewMedia {
    dialogType = 'image';
    url = '';
    close;
    hasError = false;
    isLoaded = false;
    handleClose = () => {
        this.close.emit();
    };
    handleError = () => {
        this.hasError = true;
    };
    handleLoad = () => {
        this.isLoaded = true;
    };
    render() {
        return (h(Host, { key: 'de1badf50b6a4ead96b70b72c60f3aff3805f9a7' }, h("div", { key: 'a6ea68924df979bdea4e658feaebe2c78fd47e51', class: `dialog-preview-media ${deviceModeStore.get('mode') === 'mobile' ? 'w-xs' : 'w-xl'}` }, h("div", { key: '069b761a8fce9daac99e10348422510eef743cb2', class: "dialog-preview-media-close" }, h(ZIconButton, { key: '116b2996d3614bb9a8d03b7f79323f09521969c3', iconName: "X", variant: "none", noPadding: true, noPaddingY: true, onClick: () => this.handleClose() })), h("div", { key: '724afc43a98201a0ca223e3e25d0d5663e2ed70c', class: "dialog-preview-media-content" }, this.hasError ? (h("div", { class: "dialog-preview-media-error-wrapper" }, h("p", { class: "text-theme-gray" }, "Media not available"), h(Icon, { name: "ImageOff", addClass: "size-32 text-surface" }))) : (h("div", { class: "relative flex items-center justify-center" }, ['image', 'sticker', 'share'].includes(this.dialogType) && (h("div", { class: "dialog-preview-media-wrapper" }, !this.isLoaded && h(MediaSkeleton, null), h("img", { src: this.url, alt: "preview-message-image", class: "dialog-preview-media-image", onError: this.handleError, onLoad: this.handleLoad, loading: "lazy" }))), ['video', 'ig_reel', 'story_mention'].includes(this.dialogType) && (h("video", { controls: true, autoplay: true, muted: true, playsinline: true, src: this.url, preload: "metadata", id: "preview-message-video", class: "dialog-preview-media-size", onError: this.handleError })), ['audio'].includes(this.dialogType) && (h("audio", { controls: true, src: this.url, preload: "metadata", id: "preview-message-audio", class: "dialog-preview-media-size", onError: this.handleError }))))))));
    }
    static get is() { return "dialog-preview-media"; }
    static get originalStyleUrls() {
        return {
            "$": ["dialog-preview-media.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dialog-preview-media.css"]
        };
    }
    static get properties() {
        return {
            "dialogType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "MessageAttachmentType",
                    "resolved": "\"audio\" | \"file\" | \"ig_reel\" | \"image\" | \"story_mention\" | \"template\" | \"video\"",
                    "references": {
                        "MessageAttachmentType": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::MessageAttachmentType",
                            "referenceLocation": "MessageAttachmentType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dialog-type",
                "defaultValue": "'image'"
            },
            "url": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "url",
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "hasError": {},
            "isLoaded": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
}
