var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeWelcomePage_componentLocale, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, _GxIdeWelcomePage_slidesElements, _GxIdeWelcomePage_slidesElementsRef, _GxIdeWelcomePage_slideTimeOutId, _GxIdeWelcomePage_closeSlider, _GxIdeWelcomePage_initiateSlidesTransition, _GxIdeWelcomePage_displayWords, _GxIdeWelcomePage_dotClickedHandler, _GxIdeWelcomePage_keyboardEventHandler, _GxIdeWelcomePage_nextSlideHandler, _GxIdeWelcomePage_prevSlideHandler, _GxIdeWelcomePage_slideTimeOut, _GxIdeWelcomePage_secondsToRead, _GxIdeWelcomePage_renderSlides, _GxIdeWelcomePage_splitWords, _GxIdeWelcomePage_updateActiveSlide;
// Stencil
import { Host, h, getAssetPath } from "@stencil/core";
// Other Libraries
import { getIconPath } from "@genexus/mercury";
// Custom Imports
import { Locale } from "../../common/locale";
const ACTIVE_SLIDE_SELECTOR = "active";
const ARROW_LEFT_KEY = "ArrowLeft";
const ARROW_RIGHT_KEY = "ArrowRight";
const ESCAPE_KEY = "Escape";
const SLIDE_FADE_DURATION = 300;
const SLIDE_WORD_SELECTOR = ".slide__word";
const SLIDE_WORD_SELECTOR_TIMEOUT = 70;
const SLIDE_WORD_SELECTOR_VISIBLE = "slide__word--visible";
// icons
const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
const CLOSE_ICON = getIconPath({
    category: "system",
    name: "close",
    colorType: "interactive"
});
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/typography",
    "components/icon",
    "components/button"
];
export class GxIdeWelcomePage {
    constructor() {
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeWelcomePage_componentLocale.set(this, void 0);
        _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed.set(this, new Map());
        _GxIdeWelcomePage_slidesElements.set(this, []);
        _GxIdeWelcomePage_slidesElementsRef.set(this, []);
        // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide
        // that is set to be displayed as chunks, has already been displayed. Used to not display
        // as chunks after the first time.
        _GxIdeWelcomePage_slideTimeOutId.set(this, void 0);
        _GxIdeWelcomePage_closeSlider.set(this, () => {
            this.sliderVisible = false;
            setTimeout(() => {
                // wait until the slide disappears, then remove.
                this.el.remove();
                this.closeCallback();
                document.removeEventListener("keydown", __classPrivateFieldGet(this, _GxIdeWelcomePage_keyboardEventHandler, "f"));
            }, SLIDE_FADE_DURATION);
        });
        _GxIdeWelcomePage_initiateSlidesTransition.set(this, () => {
            __classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOut, "f").call(this);
            // listen to keydown events to navigate the slides with the arrows
            document.addEventListener("keydown", __classPrivateFieldGet(this, _GxIdeWelcomePage_keyboardEventHandler, "f"));
        });
        _GxIdeWelcomePage_displayWords.set(this, (wordsNodeList) => {
            wordsNodeList.forEach((word, index) => {
                setTimeout(() => {
                    word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);
                }, index * SLIDE_WORD_SELECTOR_TIMEOUT);
            });
        });
        _GxIdeWelcomePage_dotClickedHandler.set(this, (event) => {
            this.userHasChangedSlide = true;
            const itemClicked = event.currentTarget;
            const index = parseInt(itemClicked.getAttribute("data-index"), 10);
            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, index);
        });
        _GxIdeWelcomePage_keyboardEventHandler.set(this, (event) => {
            this.userHasChangedSlide = true;
            const goToPrevSlide = event.key === ARROW_LEFT_KEY &&
                !this.slideTransitioning &&
                !this.lastSlideReached &&
                this.activeSlideIndex !== 0;
            const goToNextSlide = event.key === ARROW_RIGHT_KEY &&
                !this.slideTransitioning &&
                !this.lastSlideReached;
            const closeSlider = event.key === ESCAPE_KEY ||
                (event.key === ARROW_RIGHT_KEY &&
                    !this.slideTransitioning &&
                    this.lastSlideReached);
            if (goToNextSlide) {
                __classPrivateFieldGet(this, _GxIdeWelcomePage_nextSlideHandler, "f").call(this);
            }
            else if (goToPrevSlide) {
                __classPrivateFieldGet(this, _GxIdeWelcomePage_prevSlideHandler, "f").call(this);
            }
            else if (closeSlider) {
                __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f").call(this);
            }
        });
        _GxIdeWelcomePage_nextSlideHandler.set(this, () => {
            const newIndex = this.activeSlideIndex + 1;
            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, newIndex);
        });
        _GxIdeWelcomePage_prevSlideHandler.set(this, () => {
            const newIndex = this.activeSlideIndex - 1;
            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, newIndex);
        });
        _GxIdeWelcomePage_slideTimeOut.set(this, () => {
            // Clear any existing timeout
            if (__classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOutId, "f")) {
                clearTimeout(__classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOutId, "f"));
            }
            const autoChangeSlide = this.transitionType === "auto" &&
                !this.lastSlideReached &&
                !this.userHasChangedSlide;
            if (!autoChangeSlide) {
                return;
            }
            let itemsWordsCount = 0;
            if (this.slides[this.activeSlideIndex].listItems) {
                const itemsWords = this.slides[this.activeSlideIndex].listItems.map(item => {
                    return item.title + item.description;
                });
                if (itemsWords.length) {
                    const mergedItemsWords = itemsWords.join("");
                    itemsWordsCount = mergedItemsWords.split(" ").length;
                }
            }
            const mergedDescription = this.slides[this.activeSlideIndex].description.join("");
            const words = mergedDescription.split(" ").length;
            const timeBeforeNextSlide = __classPrivateFieldGet(this, _GxIdeWelcomePage_secondsToRead, "f").call(this, words + itemsWordsCount);
            // Set a fresh timeout
            if (timeBeforeNextSlide) {
                __classPrivateFieldSet(this, _GxIdeWelcomePage_slideTimeOutId, setTimeout(() => {
                    __classPrivateFieldGet(this, _GxIdeWelcomePage_nextSlideHandler, "f").call(this);
                }, timeBeforeNextSlide), "f");
            }
        });
        _GxIdeWelcomePage_secondsToRead.set(this, (wordsCount, wordsPerMinute = this.wordsPerMinute) => {
            const minutes = wordsCount / wordsPerMinute;
            const milliseconds = minutes * 60000; // Convert minutes to milliseconds
            return milliseconds;
        });
        _GxIdeWelcomePage_renderSlides.set(this, () => {
            __classPrivateFieldSet(this, _GxIdeWelcomePage_slidesElements, this.slides.map((slide, index) => {
                var _a, _b;
                const isLastSlide = index === this.slides.length - 1;
                return (h("section", { class: "slide__wrapper", ref: (el) => (__classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[index] = el) }, h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeWelcomePage_componentLocale, "f").copyright.illustrationAriaLabel }, h("img", { class: "slide__illustration-img", src: slide.illustration.url, alt: slide.illustration.alt })), h("section", { class: "slide__copy" }, h("div", { class: "slide__copy-container" }, h("header", { class: "slide__copy-header" }, h("img", { src: ICON_NEXT, alt: "GeneXus Next isologotype" }), h("h2", { class: "slide__copy-title heading-2" }, slide.title)), h("div", { class: "slide__copy-description" }, (_a = slide.description) === null || _a === void 0 ? void 0 :
                    _a.map(paragraph => {
                        return (h("p", null, slide.descriptionAsChunks
                            ? __classPrivateFieldGet(this, _GxIdeWelcomePage_splitWords, "f").call(this, paragraph)
                            : paragraph));
                    }), ((_b = slide.listItems) === null || _b === void 0 ? void 0 : _b.length) && (h("ul", { class: "slide__list" }, slide.listItems.map(item => {
                    return (h("li", { class: "slide__list-item" }, h("strong", { class: "slide__list-item-title" }, item.title), " ", item.description));
                })))), isLastSlide && (h("button", { class: "button-primary start-button", onClick: __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f") }, __classPrivateFieldGet(this, _GxIdeWelcomePage_componentLocale, "f").startButtonCaption))))));
            }), "f");
        });
        _GxIdeWelcomePage_splitWords.set(this, (paragraph) => {
            return paragraph.split(" ").map(word => {
                // keep the space after {word} !
                return h("span", { class: "slide__word" }, word, " ");
            });
        });
        _GxIdeWelcomePage_updateActiveSlide.set(this, (newSlideIndex) => {
            this.slideTransitioning = true;
            // unset current active slide
            const activeSlide = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[this.activeSlideIndex];
            activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);
            const nextSlideReference = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[newSlideIndex];
            const displayDescriptionAsChunks = this.slides[newSlideIndex].descriptionAsChunks;
            const descriptionAsChunksDisplayedAlready = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, "f").get(newSlideIndex);
            let wordsCount;
            let wordsNodeList;
            let slideTimeOut = 0;
            if (displayDescriptionAsChunks) {
                wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);
                wordsCount = wordsNodeList.length;
                slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;
            }
            this.lastSlideReached = newSlideIndex === this.slides.length - 1;
            // set new slide as active after fade out
            setTimeout(() => {
                nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);
                if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {
                    __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, "f").set(newSlideIndex, true);
                    __classPrivateFieldGet(this, _GxIdeWelcomePage_displayWords, "f").call(this, wordsNodeList);
                    setTimeout(() => {
                        this.slideTransitioning = false;
                    }, slideTimeOut);
                }
                else {
                    this.slideTransitioning = false;
                }
            }, SLIDE_FADE_DURATION);
            // update active slide index
            this.activeSlideIndex = newSlideIndex;
            __classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOut, "f").call(this); // this has to be after this.#updateActiveSlide.
        });
        this.activeSlideIndex = 0;
        this.displaySlider = false;
        this.copyrightsVisible = true;
        this.lastSlideReached = false;
        this.sliderVisible = false;
        this.slideTransitioning = false;
        this.userHasChangedSlide = false;
        this.transitionType = "auto";
        this.wordsPerMinute = 250;
        this.closeCallback = undefined;
        this.slides = [];
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeWelcomePage_componentLocale, await Locale.getComponentStrings(this.el), "f");
        __classPrivateFieldGet(this, _GxIdeWelcomePage_renderSlides, "f").call(this);
    }
    componentDidLoad() {
        __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[this.activeSlideIndex].classList.add(ACTIVE_SLIDE_SELECTOR);
        this.sliderVisible = true;
        __classPrivateFieldGet(this, _GxIdeWelcomePage_initiateSlidesTransition, "f").call(this);
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: {
                "main": true,
                "main--visible": this.sliderVisible,
                "main--border-glow": this.lastSlideReached
            }, style: { "--slide-fade-duration": `${SLIDE_FADE_DURATION}ms` } }, h("section", { class: "slide" }, h("header", { class: "slide__header" }, h("button", { class: "button-tertiary button-icon-only close-icon", "aria-label": "close presentation", onClick: __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f") }, h("ch-image", { class: "icon-m", src: CLOSE_ICON }))), h("div", { class: "slide__container" }, __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElements, "f")), h("footer", {
            // slide common footer
            class: {
                slide__footer: true
            }
        }, h("div", { class: {
                "slide__footer-wrapper": true
            } }, h("ul", { class: "slide__dots", "aria-label": "Slide indicators" }, this.slides.map((_, index) => {
            return (h("li", { class: {
                    "slide__dot": true,
                    "slide__dot-inactive": this.slideTransitioning,
                    [ACTIVE_SLIDE_SELECTOR]: index === this.activeSlideIndex
                }, "data-index": index, onClick: !this.slideTransitioning && __classPrivateFieldGet(this, _GxIdeWelcomePage_dotClickedHandler, "f") }));
        }))))))));
    }
    static get is() { return "gx-ide-welcome-page"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["welcome-page.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["welcome-page.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/welcome-page"]; }
    static get properties() {
        return {
            "transitionType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TransitionType",
                    "resolved": "\"auto\" | \"static\"",
                    "references": {
                        "TransitionType": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/welcome-page/welcome-page.tsx",
                            "id": "src/components/welcome-page/welcome-page.tsx::TransitionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The transition type between the slides. \"static\" requires the user to navigate by clicking the navigation dots. \"auto\" will transition automatically after a calculated amount of time."
                },
                "attribute": "transition-type",
                "reflect": false,
                "defaultValue": "\"auto\""
            },
            "wordsPerMinute": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The estimated amount of words per minute that the user requires to read a slide. This value is used to return the time each slide is freezed before transitioning to the next one. Only evaluated when transitionType is set to \"auto\"."
                },
                "attribute": "words-per-minute",
                "reflect": false,
                "defaultValue": "250"
            },
            "closeCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "CloseCallback",
                    "resolved": "() => Promise<void>",
                    "references": {
                        "CloseCallback": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/welcome-page/welcome-page.tsx",
                            "id": "src/components/welcome-page/welcome-page.tsx::CloseCallback"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when the user closes the slider by pressing the close button."
                }
            },
            "slides": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "SlideInfo[]",
                    "resolved": "SlideInfo[]",
                    "references": {
                        "SlideInfo": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/welcome-page/welcome-page.tsx",
                            "id": "src/components/welcome-page/welcome-page.tsx::SlideInfo"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "An array of slides, with the information that each slide requires. This slides appear after the first slide (Copyrights) that is defined inside the component."
                },
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "activeSlideIndex": {},
            "displaySlider": {},
            "copyrightsVisible": {},
            "lastSlideReached": {},
            "sliderVisible": {},
            "slideTransitioning": {},
            "userHasChangedSlide": {}
        };
    }
    static get elementRef() { return "el"; }
}
_GxIdeWelcomePage_componentLocale = new WeakMap(), _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed = new WeakMap(), _GxIdeWelcomePage_slidesElements = new WeakMap(), _GxIdeWelcomePage_slidesElementsRef = new WeakMap(), _GxIdeWelcomePage_slideTimeOutId = new WeakMap(), _GxIdeWelcomePage_closeSlider = new WeakMap(), _GxIdeWelcomePage_initiateSlidesTransition = new WeakMap(), _GxIdeWelcomePage_displayWords = new WeakMap(), _GxIdeWelcomePage_dotClickedHandler = new WeakMap(), _GxIdeWelcomePage_keyboardEventHandler = new WeakMap(), _GxIdeWelcomePage_nextSlideHandler = new WeakMap(), _GxIdeWelcomePage_prevSlideHandler = new WeakMap(), _GxIdeWelcomePage_slideTimeOut = new WeakMap(), _GxIdeWelcomePage_secondsToRead = new WeakMap(), _GxIdeWelcomePage_renderSlides = new WeakMap(), _GxIdeWelcomePage_splitWords = new WeakMap(), _GxIdeWelcomePage_updateActiveSlide = new WeakMap();
//# sourceMappingURL=welcome-page.js.map
