import { Host, h } from "@stencil/core";
export class XShowcase {
    constructor() {
        this.isLeftArrowActive = false;
        this.isRightArrowActive = false;
        this.activeScroll = null;
        this.activeMediaIndex = 0;
        this.busyScroll = false;
        this.mediaElements = [];
    }
    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;
        }
    }
    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: 'b0b941055774d3534c9517d24184bee07a8ba41b' }, h("div", { key: '8015b5edf487b5427333342fd7a0f283e2132e88', class: "main-media" }, this.getMainElementRender()), h("div", { key: '1c1c669e5dd91737f9298bcda747283e8dcb6ef9', class: "item-selector" }, this.isLeftArrowActive && h("button", { key: 'bf887d659fae6db0e62851bcf65a4c5053c6b5cd', disabled: this.busyScroll, onClick: () => this.onScrollLeft() }, h("x-icon", { key: '56943c8a3a5b8d86ae13b8c64becd9adcea71a30', name: "back" })), h("slot", { key: 'f9ed2075de8c055af19fdfefc7e700b240aeee43' }), h("div", { key: 'cc1aaaaf8e4db80a6762950c50e68ebca251b4ce', class: "items", onScroll: () => this.onContainerScroll() }, 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: '23c5b98e12b4056386262330a94a10afaf5e10d9', disabled: this.busyScroll, onClick: () => this.onScrollRight() }, h("x-icon", { key: 'e55246ad78324e7a6683bdd257a7fe58fe375d3a', name: "forward" }))));
    }
    static get is() { return "x-showcase"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get states() {
        return {
            "isLeftArrowActive": {},
            "isRightArrowActive": {},
            "activeScroll": {},
            "activeMediaIndex": {},
            "busyScroll": {},
            "mediaElements": {}
        };
    }
    static get elementRef() { return "el"; }
}
