// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class ImageGallery {
    constructor() {
        // Props
        this.colorMode = 'dark'; // 'light' or 'dark'
        this.images = [];
        this.fullScreen = false;
        this.standAlone = false; // Whether only the gallery is displayed on the page
        this.isWeb = false;
        // States
        this.isEnd = false;
        this.isBeginning = true;
        this.popupVisible = true;
    }
    // Listeners
    checkSlidePosition() {
        this.isBeginningSlide().then(isBeginning => this.isBeginning = isBeginning);
        this.isEndSlide().then(isEnd => this.isEnd = isEnd);
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentDidLoad() {
        setTimeout(() => {
            const slides = this.getSlides();
            if (slides !== null)
                slides.update();
        }, 1000);
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Open the Modal
     */
    requestFullscreen() {
        this.fullScreenRequested.emit();
    }
    /**
     * Close the Modal
    */
    closeModal() {
        this.isBeginning = true;
        this.isEnd = false;
        this.closeModalClicked.emit();
    }
    /**
     * Trigger the next slide
     */
    slideNext() {
        this.getSlides().slideNext();
    }
    /**
     * Trigger the previous slide
     */
    slidePrev() {
        this.getSlides().slidePrev();
    }
    ////////////////////////////////////////////////////////////////
    // Utils
    ////////////////////////////////////////////////////////////////
    /**
     * Get whether or not the current slide is the last slide
     */
    isEndSlide() {
        return this.getSlides().isEnd();
    }
    /**
     * Get whether or not the current slide is the first slide
     */
    isBeginningSlide() {
        return this.getSlides().isBeginning();
    }
    /**
     * Get the Slides component from the DOM
     */
    getSlides() {
        return document.getElementById("ionSlides");
    }
    ////////////////////////////////////////////////////////////////
    // Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Mini images inline
     */
    miniImages() {
        return h("div", { class: "mini-images-container ion-activatable" },
            this.images.map((image, index) => h("img", { src: MediaTool.imageS(image), alt: image.description, onClick: () => { this.requestFullscreen(); } })),
            h("ion-ripple-effect", { type: 'unbounded' }));
    }
    /**
     * Slider
     */
    slider() {
        return h("div", { class: 'slider-container', onClick: () => this.popup() },
            h("ion-slides", { id: "ionSlides", class: "slider" }, this.images.map((image, index) => h("ion-slide", { class: "slide" },
                h("div", { style: { 'backgroundImage': 'url(' + MediaTool.fullScreen(this.isWeb, image) + ')' }, class: "background-image" },
                    h("p", { class: 'progression-text' },
                        index + 1,
                        "/",
                        this.images.length)),
                h("span", { class: "info-container info-visible", style: {
                        color: this.colorMode === 'light' ? 'var(--ion-color-dark)' : 'var(--ion-color-light)',
                        'background-color': this.colorMode === 'light' ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.5)'
                    } },
                    this.titleContainer(image),
                    this.separator(),
                    image.description ? this.descriptionContainer(image) : '',
                    image.source || image.copyrights ? this.legalContainer(image) : '')))));
    }
    /**
     * Popup containing info about image
     */
    popup() {
        const elements = document.getElementsByClassName('info-container');
        for (let i = 0; i < elements.length; i++) {
            elements.item(i).className = 'info-container ' + (this.popupVisible ? 'info-hidden' : 'info-visible');
        }
        this.popupVisible = !this.popupVisible;
    }
    /**
     * Image name and year
     * @param image
     */
    titleContainer(image) {
        return h("div", { class: 'title-container' },
            h("p", { class: "name" }, image.name),
            image.year.toString().length == 4
                ? h("p", { class: "year" }, image.year)
                : '');
    }
    /**
     * Separator between title and description
     */
    separator() {
        return h("div", { class: "separator", style: { 'background-color': this.colorMode === 'light' ? 'var(--ion-color-dark)' : 'var(--ion-color-light)' } });
    }
    /**
     * Image description
     * @param image
     */
    descriptionContainer(image) {
        return h("div", { class: 'description-container' },
            " ",
            h("p", null, image.description));
    }
    /**
     * Image legal mentions
     * @param image
     */
    legalContainer(image) {
        return h("span", { class: 'legal-container' },
            image.source
                ? h("p", { class: "legal" },
                    "[ Source: ",
                    image.source,
                    " ]")
                : '',
            image.copyrights
                ? h("p", { class: "legal" },
                    "\u00A9",
                    image.copyrights)
                : '');
    }
    /**
     * Previous slide button
     */
    prevButton() {
        return h("ion-button", { fill: "clear", color: 'dark', class: "prev", onClick: () => this.slidePrev() },
            h("ion-icon", { name: "arrow-round-back", color: "light" }));
    }
    /**
     * Next slide button
     */
    nextButton() {
        return h("ion-button", { fill: "clear", color: 'dark', class: "next", onClick: () => this.slideNext() },
            h("ion-icon", { name: "arrow-round-forward", color: "light" }));
    }
    /**
     * Close button to leave fullscreen mode
     */
    closeButton() {
        return h("ion-button", { shape: "round", color: "dark", class: "close-button", onClick: () => { this.closeModal(); } },
            h("ion-icon", { name: "close", size: "4em", color: "light" }));
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'gallery-container' },
            !this.fullScreen &&
                this.miniImages(),
            this.fullScreen &&
                this.slider(),
            this.fullScreen && !this.isBeginning &&
                this.prevButton(),
            this.fullScreen && !this.isEnd &&
                this.nextButton(),
            this.fullScreen && !this.standAlone &&
                this.closeButton()));
    }
    static get is() { return "image-gallery"; }
    static get originalStyleUrls() { return {
        "$": ["image-gallery.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["image-gallery.css"]
    }; }
    static get properties() { return {
        "colorMode": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color-mode",
            "reflect": false,
            "defaultValue": "'dark'"
        },
        "images": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "MediaElement[]",
                "resolved": "MediaElement[]",
                "references": {
                    "MediaElement": {
                        "location": "import",
                        "path": "../../../models/media/media-model"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "fullScreen": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "full-screen",
            "reflect": false,
            "defaultValue": "false"
        },
        "standAlone": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "stand-alone",
            "reflect": false,
            "defaultValue": "false"
        },
        "isWeb": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "is-web",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
    static get states() { return {
        "isEnd": {},
        "isBeginning": {},
        "popupVisible": {}
    }; }
    static get events() { return [{
            "method": "fullScreenRequested",
            "name": "fullScreenRequested",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }, {
            "method": "closeModalClicked",
            "name": "closeModalClicked",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }]; }
    static get watchers() { return [{
            "propName": "isWeb",
            "methodName": "render"
        }]; }
    static get listeners() { return [{
            "name": "ionSlideDidChange",
            "method": "checkSlidePosition",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
