/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import React, { Component } from "react";
import { getAppNameIconWhenNoImage, getTruncatedStringWithEllipses } from "./helpers";
// data
import storeActions from "../stores/storeActions";
/**
 * The card that displays on any page with information about an app. Clicking on it will lead to the AppShowcase or install (if the check is clicked)
 * @param {object} props Component props
 * @param {object} props...card The entire object that belongs to a single app. See FDC app directory.
 * @param {boolean} props.entitled If true, the app cannot be installed by this user, only viewed
 * @param {boolean} props.installed If true the app is installed on this local fsbl
 */
class AppCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkShown: this.props.installed === true,
            checkHighlighted: false,
            awaitingInstall: false,
            toggleCheckAfterAction: false,
            titleUnderlined: false,
            appName: this.props.title || this.props.name,
            id: this.props.appId,
            entitled: this.props.entitled ? this.props.entitled : false,
            tags: this.props.tags || [],
        };
        this.bindCorrectContext();
    }
    bindCorrectContext() {
        this.toggleHighlight = this.toggleHighlight.bind(this);
        this.toggleTitleUnderline = this.toggleTitleUnderline.bind(this);
        this.showCheck = this.showCheck.bind(this);
        this.hideCheck = this.hideCheck.bind(this);
        this.openAppShowcase = this.openAppShowcase.bind(this);
        this.addApp = this.addApp.bind(this);
        this.removeApp = this.removeApp.bind(this);
        this.addTag = this.addTag.bind(this);
    }
    componentDidMount() {
        if (!this.props.tags || this.props.tags.length === 0)
            return;
        const list = this.tagNamesList;
        const { footer } = this;
        if (list.offsetHeight >= footer.scrollHeight + 5) {
            let newTags = this.state.tags.slice(0, 2);
            this.setState({
                tags: newTags,
            });
        }
    }
    /**
     * Toggles the highlight state of the check mark for installing an app
     */
    toggleHighlight() {
        this.setState({
            checkHighlighted: !this.state.checkHighlighted,
        });
    }
    /**
     * Toggles the 'highlight' state of the app title. On mouse over, the title is underlined to show that its a link
     */
    toggleTitleUnderline() {
        this.setState({
            titleUnderlined: !this.state.titleUnderlined,
        });
    }
    /**
     * Shows the check mark for adding/removing an app
     */
    showCheck() {
        this.setState({
            checkShown: true,
        });
    }
    /**
     * Hides the check mark for adding/removing an app
     */
    hideCheck() {
        if (this.state.awaitingInstall) {
            // If an add/remove is taking place and this is called, toggle the check after the action completes
            this.setState({
                toggleCheckAfterAction: true,
            });
        }
        else {
            // Don't hide if installed. Stay green and showing
            if (!this.props.installed) {
                this.setState({
                    checkShown: false,
                });
            }
        }
    }
    /**
     * Calls parent passed function to open the app showcase for the supplied app
     */
    openAppShowcase() {
        this.props.viewAppShowcase(this.state.id);
    }
    /**
     * Prevents bubbling (which would open the app showcase), then calls to add an app
     * @param {object} e React Synthetic event
     */
    addApp(e) {
        e.preventDefault();
        e.stopPropagation();
        this.setState({
            awaitingInstall: true,
        }, () => {
            storeActions.addApp(this.state.id, () => {
                this.setState({
                    awaitingInstall: false,
                });
            });
        });
    }
    /**
     * Prevents bubbling (which would open the app showcase), then calls to remove an app
     * @param {object} e React Synthetic event
     */
    removeApp(e) {
        e.preventDefault();
        e.stopPropagation();
        this.setState({
            awaitingInstall: true,
        }, () => {
            storeActions.removeApp(this.state.id, () => {
                if (this.state.toggleCheckAfterAction) {
                    this.setState({
                        awaitingInstall: false,
                        toggleCheckAfterAction: false,
                        checkShown: !this.state.checkShown,
                    });
                }
                else {
                    this.setState({
                        awaitingInstall: false,
                    });
                }
            });
        });
    }
    /**
     * Prevents bubbling (which would open the app showcase), then calls to add a filtering tag
     * @param {string} name The tag name to add
     * @param {object} e React Synthetic event
     */
    addTag(name, e) {
        e.preventDefault();
        e.stopPropagation();
        storeActions.addTag(name);
    }
    render() {
        let imageUrl = this.props.icons !== undefined ? this.props.icons[0].url : null;
        let { appName, checkShown, checkHighlighted } = this.state;
        let imageIconClasses = "ff-check-mark-2";
        if (this.props.installed && checkHighlighted)
            imageIconClasses = `${imageIconClasses} highlighted added`;
        else if (this.props.installed || checkHighlighted)
            imageIconClasses = `${imageIconClasses} highlighted`;
        else
            imageIconClasses = `${imageIconClasses} faded`;
        let titleClass = this.state.titleUnderlined ? "app-title highlighted" : "app-title";
        let entitled = this.state.entitled ? " entitled" : "";
        let imageStyle = `app-image ${entitled}`;
        if (!imageUrl) {
            imageUrl = this.props.images !== undefined ? this.props.images[0].url : null;
            imageStyle = `${imageStyle} noIcon`;
        }
        if (!imageUrl) {
            imageStyle = `${imageStyle} noImg`;
        }
        let cardStyle = this.state.tags.length > 0 ? "app-card" : "app-card no-tags";
        let appAction = this.props.installed ? this.removeApp : this.addApp;
        return (React.createElement("div", { className: cardStyle, onClick: this.openAppShowcase, onMouseEnter: this.showCheck, onMouseLeave: this.hideCheck },
            React.createElement("div", { className: "app-image-container" },
                imageUrl ? (React.createElement("img", { className: imageStyle, src: imageUrl })) : (React.createElement("div", { className: imageStyle },
                    React.createElement("span", null, getAppNameIconWhenNoImage(appName)))),
                React.createElement("div", { className: titleClass, onMouseEnter: this.toggleTitleUnderline, onMouseLeave: this.toggleTitleUnderline, title: appName }, appName)),
            React.createElement("div", { className: "row_description" },
                React.createElement("div", { className: "status-indicator" }, !entitled || !checkShown ? (React.createElement("i", null, "\u00A0")) : (React.createElement("i", { className: imageIconClasses, onMouseEnter: this.toggleHighlight, onMouseLeave: this.toggleHighlight, onClick: appAction }))),
                React.createElement("div", { className: "app-description" }, this.props.description ? this.props.description : "")),
            this.state.tags.length > 0 && (React.createElement("div", { className: "app-tags", ref: (el) => {
                    this.footer = el;
                } },
                React.createElement("i", { className: "ff-tag" }),
                React.createElement("div", { className: "app-tag-names", ref: (el) => {
                        this.tagNamesList = el;
                    } }, this.state.tags.map((tag, i) => {
                    const tagName = tag;
                    return (React.createElement("span", { key: i, className: "tag-name", onClick: this.addTag.bind(this, tag), title: tagName },
                        getTruncatedStringWithEllipses(tagName),
                        i !== this.props.tags.length - 1 ? ", " : null));
                }))))));
    }
}
export default AppCard;
//# sourceMappingURL=AppCard.js.map