/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
/**
 * This component is the name of a component and a pin that will pin that component to all toolbars.
 *
 */
import React, { Component } from "react";
import { getAppNameIconWhenNoImage } from "./helpers";
/**
 * The hero component at the top of the App Catalog homepage. Display images and textual descriptions of showcased apps
 * @param {object} props Component props
 */
export default class Hero extends Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 0,
        };
        this.bindCorrectContext();
    }
    bindCorrectContext() {
        this.changePage = this.changePage.bind(this);
        this.openApp = this.openApp.bind(this);
    }
    /**
     * Changes the page of the hero component depending on the action its handed
     * @param {string} action One of 'page_down' or 'page_up'. Any other action is ignored
     */
    changePage(action) {
        let { cards } = this.props;
        let newActive = this.state.active;
        if (typeof action === "number") {
            newActive = action;
        }
        else {
            switch (action) {
                case "page_down":
                    newActive = newActive - 1 < 0 ? cards.length - 1 : newActive - 1;
                    break;
                case "page_up":
                    newActive = newActive + 1 > cards.length - 1 ? 0 : newActive + 1;
                    break;
                default:
                    break;
            }
        }
        this.setState({
            active: newActive,
        });
    }
    /**
     * Called the parent function to open the AppShowcase for the clicked app
     */
    openApp() {
        this.props.viewAppShowcase(this.props.cards[this.state.active].appId);
    }
    render() {
        var _a;
        let { active } = this.state;
        let { cards } = this.props;
        let contentTitle = cards[active].title === undefined ? cards[active].name : cards[active].title;
        let contentMsg = cards[active].description;
        let imageUrl = cards[active].images ? (_a = cards[active].images) === null || _a === void 0 ? void 0 : _a[0].url : null;
        return (React.createElement("div", null,
            React.createElement("div", { className: "hero-content" },
                React.createElement("i", { className: "ff-adp-chevron-left", onClick: this.changePage.bind(this, "page_down") }),
                React.createElement("div", { className: "visible-card", onClick: this.openApp },
                    React.createElement("div", { className: "app-details" },
                        React.createElement("div", { className: "app-title" }, contentTitle),
                        React.createElement("div", { className: "app-description" }, contentMsg)),
                    imageUrl ? (React.createElement("img", { className: "app-image", src: imageUrl })) : (React.createElement("div", { className: "app-image noimg" }, getAppNameIconWhenNoImage(contentTitle)))),
                React.createElement("i", { className: "ff-adp-chevron-right", onClick: this.changePage.bind(this, "page_up") })),
            React.createElement("br", null),
            cards.length >= 2 && cards.length <= 10 && (React.createElement("div", { className: "paginator" }, cards.map((card, i) => {
                let classes = "pagination-oval";
                if (i === active)
                    classes = `${classes} active`;
                return React.createElement("div", { key: i, className: classes, onClick: this.changePage.bind(this, i) });
            })))));
    }
}
//# sourceMappingURL=Hero.js.map