import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-ae373651.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { e as defaultIconPack, i as useLanguage } from './p-5b3a7f00.js';
import './p-a83ccdbd.js';
import { d as defineCustomElement$3 } from './p-85587a5c.js';
import { d as defineCustomElement$2 } from './p-3e0452c4.js';
import { d as defineCustomElement$1 } from './p-bece0226.js';

const rtkDraftAttachmentViewCss = ":host{display:flex;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));border-top-left-radius:var(--rtk-border-radius-md, 8px);border-top-right-radius:var(--rtk-border-radius-md, 8px)}.preview-overlay{position:absolute;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);background-color:inherit}.preview{position:absolute;top:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);max-width:-moz-fit-content;max-width:fit-content;max-height:var(--rtk-space-20, 80px)}.preview:hover rtk-tooltip{display:block}.preview rtk-tooltip{position:absolute;top:calc(var(--rtk-space-1, 4px) * -1);left:calc(var(--rtk-space-1, 4px) * -1);display:none;margin-left:calc(var(--rtk-space-1, 4px) * -1);margin-top:calc(var(--rtk-space-1, 4px) * -1)}.preview rtk-button{display:flex;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));border:1px solid rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview rtk-icon{height:var(--rtk-space-3, 12px);width:var(--rtk-space-3, 12px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.preview-image{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);-o-object-fit:cover;object-fit:cover;max-height:100%;max-width:100%;overflow:clip;border-radius:var(--rtk-border-radius-md, 8px)}.preview-file{padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--rtk-border-radius-md, 8px);max-width:200px}";
const RtkDraftAttachmentViewStyle0 = rtkDraftAttachmentViewCss;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const RtkDraftAttachmentView = /*@__PURE__*/ proxyCustomElement(class RtkDraftAttachmentView extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.onDeleteAttachment = createEvent(this, "deleteAttachment", 7);
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        /** Attachment to display */
        this.attachment = null;
        this.filePreview = null;
        this.fileReader = new FileReader();
        this.generatePreview = () => {
            if (this.attachment.type === 'image') {
                this.fileReader.readAsDataURL(this.attachment.file);
            }
            else if (this.attachment.type === 'file') {
                this.filePreview = this.attachment.file.name;
            }
        };
        this.onDeleteClickHandler = () => {
            this.filePreview = null;
            this.onDeleteAttachment.emit();
        };
    }
    onAttachmentChange() {
        this.generatePreview();
    }
    connectedCallback() {
        this.fileReader.onload = (e) => {
            if (typeof e.target.result === 'string') {
                this.filePreview = e.target.result;
            }
        };
        // this.fileReader.onloadstart = () => {};
        // this.fileReader.onloadend = () => {};
    }
    componentWillLoad() {
        this.onAttachmentChange();
    }
    render() {
        return (h(Host, { key: '4bdc44453552e63a40d31d851a752009d4df74d1' }, h("div", { key: 'c3024512c383063e7b7be4c3006c726ce9641670', class: "preview-overlay" }, h("div", { key: 'a14d0cd7148029828baea3fc9261c7b8f70f5bfc', class: "preview" }, h("rtk-tooltip", { key: '600f07d41fcf00b156120268fdbdff165ae9c040', label: this.t('chat.cancel_upload') }, h("rtk-button", { key: '99059cb78c5451758fe859bb002a05ab3827f718', variant: "secondary", kind: "icon", onClick: this.onDeleteClickHandler }, h("rtk-icon", { key: '422f06eb7d08f0708e9c46dc64eb329708a9307a', icon: this.iconPack.dismiss }))), this.attachment.type === 'image' ? (h("img", { class: "preview-image", src: this.filePreview })) : (h("div", { class: "preview-file" }, h("span", null, this.filePreview)))))));
    }
    static get watchers() { return {
        "attachment": ["onAttachmentChange"]
    }; }
    static get style() { return RtkDraftAttachmentViewStyle0; }
}, [1, "rtk-draft-attachment-view", {
        "iconPack": [16],
        "t": [16],
        "attachment": [16],
        "filePreview": [32]
    }, undefined, {
        "attachment": ["onAttachmentChange"]
    }]);
__decorate([
    SyncWithStore()
], RtkDraftAttachmentView.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkDraftAttachmentView.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-draft-attachment-view", "rtk-button", "rtk-icon", "rtk-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-draft-attachment-view":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkDraftAttachmentView);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkDraftAttachmentView as R, defineCustomElement as d };
