import { library } from '@fortawesome/fontawesome-svg-core';
import * as FAR from '@fortawesome/free-regular-svg-icons';
import * as FAS from '@fortawesome/free-solid-svg-icons';
import { h } from "@stencil/core";
library.add(FAS.faDownload, FAS.faEdit, FAR.faFile, FAS.faFileContract, FAS.faPause, FAS.faPlay, FAS.faTimes, FAS.faTrash, FAS.faSpinner, FAS.faVolumeUp, FAS.faVolumeMute);
const ACTIONS = {
    cancel: 'fas:times',
    delete: 'fas:trash',
    download: 'fas:download',
    edit: 'fas:edit',
    mute: 'fas:volume-up',
    pause: 'fas:pause',
    play: 'fas:play',
    unmute: 'fas:volume-mute'
};
export class UploadItem {
    constructor() {
        this._muted = true;
        this._playing = false;
        this.handleAction = async (action) => {
            const root = this.el.getRootNode();
            const upload = root.host;
            if (!upload)
                return;
            switch (action) {
                case 'cancel':
                    return upload.cancel(this.id);
                case 'delete':
                    return upload.delete(this.id);
                case 'download':
                    return upload.download(this.id);
                case 'edit':
                    if (typeof this.value === 'string')
                        return;
                    const name = window.prompt('', this.value.name);
                    return upload.rename(this.id, name || this.value.name);
                case 'mute':
                    return (this._muted = true);
                case 'pause':
                    return this.pause();
                case 'play':
                    return this.play();
                case 'unmute':
                    return (this._muted = false);
            }
        };
        this.ignoreEvent = (event) => {
            event.stopPropagation();
        };
    }
    get id() {
        return typeof this.value === 'string' ? this.value : this.value.id;
    }
    get type() {
        if (typeof this.value === 'string')
            return 'missing';
        for (const option of ['audio', 'image', 'video'])
            if (this.value.type.startsWith(option))
                return option;
        return 'unknown';
    }
    pause() {
        const video = this.el.shadowRoot.querySelector('video');
        if (!video)
            return;
        video.pause();
        this._playing = false;
    }
    play() {
        const video = this.el.shadowRoot.querySelector('video');
        if (!video)
            return;
        video.play();
        this._playing = true;
    }
    renderAction(...actions) {
        return actions.map(action => (h("bce-button", { design: "text", icon: ACTIONS[action], onClick: () => this.handleAction(action) })));
    }
    renderActions() {
        if (this.loading)
            return this.renderAction('cancel');
        switch (this.type) {
            case 'audio':
            case 'image':
            default:
                return this.renderAction('edit', 'download', 'delete');
            case 'missing':
                return this.renderAction('delete');
            case 'video':
                return this.renderAction('edit', !this._muted ? 'mute' : 'unmute', !this._playing ? 'play' : 'pause', 'download', 'delete');
        }
    }
    renderOverlay() {
        const classes = { overlay: true, loading: !!this.loading };
        return (h("div", { class: classes, onClick: this.ignoreEvent },
            this.renderActions(),
            this.loading && h("bce-icon", { raw: "fas:spinner", spin: true }),
            h("bce-tooltip", { container: this.el.shadowRoot, target: ".overlay" }, typeof this.value === 'string' ? this.value : this.value.name)));
    }
    renderFile() {
        const classes = { file: true, loading: !!this.loading };
        const controls = Object.assign({ controls: true, controlsList: 'nodownload' });
        if (typeof this.value === 'string') {
            return (h("div", { key: this.value, class: Object.assign(Object.assign({}, classes), { missing: true }) },
                h("bce-icon", { pre: "far", name: "file" }),
                h("code", { class: "filename" }, "ERROR 404")));
        }
        const ref = this.value;
        switch (this.type) {
            case 'audio':
                return (h("audio", Object.assign({ key: ref.url, class: classes }, controls, { onClick: this.ignoreEvent }),
                    h("source", { src: ref.url, type: ref.type })));
            case 'image':
                return h("img", { key: ref.url, class: classes, src: ref.url });
            case 'video':
                return (h("video", { key: ref.url, class: classes, muted: this._muted, preload: "auto", onEnded: () => (this._playing = false) },
                    h("source", { src: ref.url, type: ref.type })));
            case 'unknown':
            default:
                return (h("div", { key: ref.url, class: Object.assign(Object.assign({}, classes), { unknown: true }) },
                    h("bce-icon", { pre: "fas", name: "file-contract" }),
                    h("code", { class: "filename" }, this.value.name)));
        }
    }
    render() {
        return [this.renderFile(), this.renderOverlay()];
    }
    static get is() { return "bce-upload-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-upload-item.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-upload-item.css"]
    }; }
    static get properties() { return {
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "FileRef | string",
                "resolved": "FileRef | string",
                "references": {
                    "FileRef": {
                        "location": "import",
                        "path": "../../models/file-ref"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        },
        "loading": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "loading",
            "reflect": true
        }
    }; }
    static get states() { return {
        "_muted": {},
        "_playing": {}
    }; }
    static get elementRef() { return "el"; }
}
