/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import React, { Component } from "react";
// data
import storeActions from "../../stores/storeActions";
// components
import Modal from "./Modal";
import Header from "./Header";
import ImageCarousel from "./ImageCarousel";
import AppDescription from "./AppDescription";
import ReleaseNotes from "./ReleaseNotes";
import AppDevNotes from "./AppDevNotes";
import VersionNotes from "./VersionNotes";
import SupportNotes from "./SupportNotes";
const imagesInCarousel = 4;
class AppShowcase extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: this.props.app.title || this.props.app.name,
            iconUrl: this.props.app.icons !== undefined && this.props.app.icons[0].url !== undefined
                ? this.props.app.icons[0].url
                : "../assets/placeholder.svg",
            entitled: this.props.app.entitled ? this.props.app.entitled : false,
            imageIndex: 0,
            imageModalOpen: false,
            modalImage: null,
        };
        this.bindCorrectContext();
    }
    bindCorrectContext() {
        this.nextImage = this.nextImage.bind(this);
        this.previousImage = this.previousImage.bind(this);
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.addTag = this.addTag.bind(this);
    }
    /**
     * Pages right through the app's images.
     */
    nextImage() {
        let imageIndex = this.state.imageIndex;
        // We want to increase the image index for the carousel, but if this paging action takes us past the length of the image array, we need to reset
        if (imageIndex + 1 >= this.props.app.images.length) {
            imageIndex = 0;
        }
        else {
            imageIndex++;
        }
        this.setState({
            imageIndex,
        });
    }
    /**
     * Pages left through the app's images.
     */
    previousImage() {
        let imageIndex = this.state.imageIndex;
        // We want to decrease the image index for the carousel, but if this paging action takes us under 0, we need to reset
        if (imageIndex - 1 < 0) {
            imageIndex = this.props.app.images.length - 1;
        }
        else {
            imageIndex--;
        }
        this.setState({
            imageIndex,
        });
    }
    /**
     * Opens the image modal (light box). Sets the image to display
     * @param {string} url The image url to display in the light box
     */
    openModal(url) {
        this.setState({
            modalImage: url,
            imageModalOpen: true,
        });
    }
    /**
     * Closes the image modal
     */
    closeModal() {
        this.setState({
            imageModalOpen: false,
            modalImage: null,
        });
    }
    /**
     * Calls the parents function to add a tag to list of filters
     * @param {string} name The tag name
     */
    addTag(name) {
        storeActions.addTag(name);
    }
    render() {
        let { iconUrl, imageIndex } = this.state;
        let images = [];
        for (let i = 0; i < (this.props.app.images ? Math.min(imagesInCarousel, this.props.app.images.length) : 0); i++) {
            let imageUrl = this.props.app.images[imageIndex].url !== undefined
                ? this.props.app.images[imageIndex].url
                : "../assets/placeholder.svg";
            images.push(imageUrl);
            if (++imageIndex >= this.props.app.images.length) {
                imageIndex = 0;
            }
        }
        return (React.createElement("div", { className: "app-showcase" },
            React.createElement(Modal, { open: this.state.imageModalOpen, closeModal: this.closeModal },
                React.createElement("img", { src: this.state.modalImage, className: "modal-image" })),
            !this.state.entitled && (React.createElement("div", { className: "app-warning" },
                React.createElement("span", { className: "app-warning-wrapper" },
                    React.createElement("span", { className: "app-warning-text" },
                        "You don't have permission to add this App. ",
                        React.createElement("a", { href: "#" }, "Contact your administrator"),
                        " to request permission.")))),
            React.createElement(Header, { iconUrl: iconUrl, entitled: this.state.entitled, ...this.props.app }),
            React.createElement(ImageCarousel, { nextImage: this.nextImage, previousImage: this.previousImage, openModal: this.openModal, images: images }),
            React.createElement(AppDescription, { description: this.props.app.description }),
            React.createElement(ReleaseNotes, { releaseNotes: this.props.app.releaseNotes }),
            React.createElement(AppDevNotes, { email: this.props.app.contactEmail, publisher: this.props.app.publisher }),
            React.createElement(VersionNotes, { version: this.props.app.version }),
            React.createElement(SupportNotes, { email: this.props.app.supportEmail, tags: this.props.app.tags })));
    }
}
export default AppShowcase;
//# sourceMappingURL=AppShowcase.js.map