import { Host, h } from "@stencil/core";
export class XShowcase {
    constructor() {
        this.upload = false;
        this.isLeftArrowActive = false;
        this.isRightArrowActive = false;
        this.activeScroll = null;
        this.activeMediaIndex = 0;
        this.busyScroll = false;
        this.mediaElements = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.searchMediaElements();
    }
    componentDidLoad() {
        var _a;
        this.searchMediaElements();
        this.onContainerScroll();
        const container = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(".items");
        if (container) {
            this.isRightArrowActive = container.scrollWidth > container.offsetWidth;
        }
    }
    searchMediaElements() {
        if (this.el) {
            this.mediaElements = Array.from(this.el.querySelector('.item-selector').childNodes)
                .filter(item => item.nodeName.toLowerCase() === 'x-showcase-item')
                .map(item => item);
        }
    }
    onContainerScroll() {
        this.busyScroll = true;
        if (this.activeScroll !== null) {
            clearTimeout(this.activeScroll);
        }
        this.activeScroll = setTimeout(() => {
            const container = this.el.querySelector(".items");
            if (container) {
                this.isLeftArrowActive = container.scrollLeft > 0;
                this.isRightArrowActive = container.scrollLeft < container.scrollWidth - container.offsetWidth;
            }
            this.busyScroll = false;
        }, 200);
    }
    onScrollLeft() {
        this.scrollItemTo(-1);
    }
    onScrollRight() {
        this.scrollItemTo(1);
    }
    onSelectMedia(event, index) {
        event.preventDefault();
        this.selectMediaElement(index);
    }
    scrollItemTo(positionFactor) {
        const container = this.el.querySelector(".items");
        if (container) {
            const factor = Math.round(container.offsetWidth / 58);
            const position = (factor - 1) * 58;
            container.scrollBy({
                top: 0,
                left: position > 200 ? positionFactor * position : positionFactor * 200,
                behavior: "smooth",
            });
        }
    }
    selectMediaElement(index) {
        if (index != null && this.mediaElements[index]) {
            this.activeMediaIndex = index;
            this.selectMedia.emit({
                index: index,
                el: this.mediaElements[index],
                target: this.el.querySelector('.media-container img, .media-container iframe'),
            });
        }
    }
    getMediaThumb(media) {
        if (media.type == "youtube") {
            return `http://img.youtube.com/vi/${this.getYoutubeId(media.url)}/0.jpg`;
        }
        return media.thumb || media.url;
    }
    getYoutubeId(url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
        var match = url.match(regExp);
        return match && match[7].length == 11 ? match[7] : false;
    }
    getMainElementRender() {
        if (!this.mediaElements[this.activeMediaIndex]) {
            return (h("x-skeleton", { height: "16rem" }));
        }
        switch (this.mediaElements[this.activeMediaIndex].type) {
            case 'image':
                return (h("img", { src: this.mediaElements[this.activeMediaIndex].url, "aria-label": this.mediaElements[this.activeMediaIndex].title, alt: this.mediaElements[this.activeMediaIndex].title }));
            case 'youtube':
                return (h("iframe", { src: this.mediaElements[this.activeMediaIndex].url, title: this.mediaElements[this.activeMediaIndex].title, height: "420", scrolling: "no", frameborder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" }));
            default:
                return (h("x-skeleton", { height: "16rem" }));
        }
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '8468f58c132449321ad11e7217d2c6a7b3c0d861' }, h("div", { key: 'c2100d90b9d3b5bf01e66f442ba167741e577771', class: "media-container" }, this.getMainElementRender(), h("div", { key: '3f872654666d55c36c08b7d1815e37d3d00fee08', class: "media-actions" }, h("slot", { key: '924dedd5f55149ea098e0643ed69fb5bdccef3cb', name: "actions" }))), h("div", { key: '6541d1e5d01b83edb0ea3d1dd5d2b40fe8072a49', class: "item-selector" }, this.isLeftArrowActive && h("button", { key: '3553678afc3ffbd668f9c15b2804b40121085150', disabled: this.busyScroll, onClick: () => this.onScrollLeft() }, h("x-icon", { key: '9984901a0ae20f3abec9fcc278c2c1447ef75ac0', name: "back" })), h("slot", { key: '802f8be6ff265e65660fa3efbd5fffe61def9cb1' }), h("div", { key: 'ef1a2166350876753d26401e6814a824a8d7f80b', class: "items", onScroll: () => this.onContainerScroll() }, this.upload && h("a", { key: '6a10c1e3f047e5b73443679faa8f97259e72e390', href: "javascript:;", onClick: () => this.uploadMedia.emit(), class: "upload-action" }, h("x-icon", { key: 'fc2d2f95d5080cb7c1c85ab4093363337afe0bde', name: "plus", size: "1.5rem" })), this.mediaElements.map((media, i) => (h("a", { onClick: (e) => this.onSelectMedia(e, i), key: i, href: media.url, style: { backgroundImage: `url(${this.getMediaThumb(media)})` }, class: { selected: i == this.activeMediaIndex } }, ['youtube', 'video'].includes(media.type) && h("svg", { x: "0px", y: "0px", viewBox: "0 0 700 700" }, h("g", null, h("path", { d: "M350,87.4c-106.2,0-192.6,86.5-192.6,192.6S243.8,472.6,350,472.6S542.6,386.2,542.6,280S456.2,87.4,350,87.4L350,87.4z\n\t\t\t\t\t\t\t\t\t\t\tM433.3,286.7c-1.3,2.2-2.7,3.6-4.9,4.9l-116.5,67.2c-2.2,1.3-4.5,1.8-6.7,1.8c-7.6,0-13.4-5.8-13.4-13.4V212.8\n\t\t\t\t\t\t\t\t\t\t\tc0-7.6,5.8-13.4,13.4-13.4c2.2,0,4.5,0.4,6.7,1.8l116.5,67.2C434.7,271.9,436.9,280.4,433.3,286.7L433.3,286.7z" }))))))), this.isRightArrowActive && h("button", { key: '58e9ec3fbb6c72b74a09bfba554089d45f0107c6', disabled: this.busyScroll, onClick: () => this.onScrollRight() }, h("x-icon", { key: '226e60dfe6ee6675c775a5bdfc86224d8a2e41fa', name: "forward" }))));
    }
    static get is() { return "x-showcase"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "upload": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element is upload media"
                },
                "attribute": "upload",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isLeftArrowActive": {},
            "isRightArrowActive": {},
            "activeScroll": {},
            "activeMediaIndex": {},
            "busyScroll": {},
            "mediaElements": {}
        };
    }
    static get events() {
        return [{
                "method": "uploadMedia",
                "name": "uploadMedia",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Element upload media event"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "selectMedia",
                "name": "selectMedia",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Element select media event"
                },
                "complexType": {
                    "original": "SelectedMedia",
                    "resolved": "SelectedMedia",
                    "references": {
                        "SelectedMedia": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-showcase/component.tsx",
                            "id": "src/components/x-showcase/component.tsx::SelectedMedia"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "handleSlotChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
