var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as classnames from "classnames";
import { Button, FlexBox, ItemAlign, Justify, Tooltip } from "../index";
import { DragHandleIcon } from "./DragHandleIcon";
import * as React from "react";
import * as FontAwesome from "react-fontawesome";
import "./ResourceTile.less";
var TITLE_MAX_LENGTH = 30;
export var CssClasses = {
    ACTION: "dewey--ResourceTile--action",
    ACTION_BUTTON: "dewey--ResourceTile--actionButton",
    CONTAINER: "dewey--ResourceTile",
    DRAGGABLE_ICON: "dewey--ResourceTile--draggableIcon",
    LINK: "dewey--ResourceTile--link",
    ICON_CONTAINER: "dewey--ResourceTile--iconContainer",
    ICON: "dewey--ResourceTile--icon",
    OVERLAYS: "dewey--ResourceTile--overlays",
    OVERLAY: "dewey--ResourceTile--overlay",
    TITLE_CONTAINER: "dewey--ResourceTile--titleContainer",
    TITLE_AND_NOTES: "dewey--ResourceTile--titleAndNotes",
    TITLE: "dewey--ResourceTile--title",
    NOTIFICATION: "dewey--ResourceTile--notification",
    NOTES: "dewey--ResourceTile--notes",
    ADDITIONAL_INFO: "dewey--ResourceTile--additionalInfo",
};
var SizeCssClasses = {
    small: "dewey--ResourceTile--size--small",
    medium: "dewey--ResourceTile--size--medium",
    large: "dewey--ResourceTile--size--large",
};
var IconOrientationCssClasses = {
    landscape: "dewey--ResourceTile--icon--landscape",
    portrait: "dewey--ResourceTile--icon--portrait",
    unknown: "",
};
var ResourceTile = /** @class */ (function (_super) {
    __extends(ResourceTile, _super);
    function ResourceTile(props) {
        var _this = _super.call(this, props) || this;
        _this.iconRef = React.createRef();
        _this.state = {
            iconOrientation: "unknown",
        };
        return _this;
    }
    ResourceTile.prototype.determineIconOrientation = function () {
        var element = this.iconRef.current;
        var iconOrientation = "unknown";
        if (element) {
            var height = element.height;
            var width = element.width;
            iconOrientation = height > width ? "portrait" : "landscape";
        }
        this.setState({ iconOrientation: iconOrientation });
    };
    ResourceTile.prototype.renderIcon = function () {
        var _this = this;
        var _a = this.props, icon = _a.icon, title = _a.title;
        var iconOrientation = this.state.iconOrientation;
        if ("node" in icon) {
            return icon.node;
        }
        return (React.createElement("img", { className: classnames(CssClasses.ICON, IconOrientationCssClasses[iconOrientation]), src: icon.src, 
            // ResourceTile icons are decorative images (redundant to the displayed text) and therefore should use an empty alt tag
            alt: "", role: "presentation", title: title, ref: this.iconRef, onLoad: function () { return _this.determineIconOrientation(); } }));
    };
    ResourceTile.prototype.renderOverlays = function () {
        var overlays = this.props.overlays;
        if (!overlays || overlays.length === 0) {
            return null;
        }
        return (React.createElement(React.Fragment, null, overlays.map(function (overlay, i) {
            return overlay && (React.createElement(FlexBox, { alignItems: ItemAlign.CENTER, className: CssClasses.OVERLAY, justify: Justify.CENTER, key: i }, overlay));
        })));
    };
    ResourceTile.prototype.render = function () {
        var _a = this.props, actions = _a.actions, additionalInfo = _a.additionalInfo, className = _a.className, draggable = _a.draggable, onClick = _a.onClick, notes = _a.notes, notify = _a.notify, size = _a.size, title = _a.title, url = _a.url, openInSameTab = _a.openInSameTab;
        return (React.createElement(FlexBox, { className: classnames(CssClasses.CONTAINER, SizeCssClasses[size], className), column: true, alignItems: ItemAlign.CENTER, alignSelf: ItemAlign.START },
            React.createElement(FlexBox, { className: CssClasses.LINK, column: true, component: "a", href: url, onClick: onClick, target: openInSameTab ? "_self" : "_blank" },
                React.createElement(FlexBox, { className: CssClasses.ICON_CONTAINER, justify: Justify.CENTER, alignItems: ItemAlign.CENTER }, this.renderIcon()),
                React.createElement(FlexBox, { className: CssClasses.TITLE_CONTAINER, column: true, alignItems: ItemAlign.CENTER },
                    React.createElement(FlexBox, { className: CssClasses.TITLE_AND_NOTES, alignItems: ItemAlign.CENTER },
                        title.length > TITLE_MAX_LENGTH ? (React.createElement(Tooltip, { content: title, placement: Tooltip.Placement.TOP, textAlign: Tooltip.Align.CENTER },
                            React.createElement("span", { className: CssClasses.TITLE }, title.substring(0, TITLE_MAX_LENGTH) + "\u2026"))) : (React.createElement("span", { className: CssClasses.TITLE }, title)),
                        notes && (React.createElement(Tooltip, { content: notes, placement: Tooltip.Placement.TOP, textAlign: Tooltip.Align.LEFT },
                            React.createElement(FontAwesome, { className: CssClasses.NOTES, name: "question-circle" })))),
                    additionalInfo && (React.createElement(FlexBox, { className: CssClasses.ADDITIONAL_INFO, alignSelf: ItemAlign.STRETCH, justify: Justify.CENTER }, additionalInfo))),
                notify && React.createElement("span", { className: CssClasses.NOTIFICATION })),
            this.renderOverlays(),
            !!actions.length && (React.createElement(FlexBox, { column: true }, actions.map(function (action, i) { return (React.createElement(FlexBox, { className: classnames(CssClasses.ACTION), key: "dewey--ResourceTileAction--" + i },
                React.createElement(Button, { className: CssClasses.ACTION_BUTTON, value: action.content, type: i === actions.length - 1 ? "link" : "primary", href: action.href, onClick: action.onClick, target: "_self" }))); }))),
            draggable && !actions.length && React.createElement(DragHandleIcon, { className: CssClasses.DRAGGABLE_ICON })));
    };
    ResourceTile.defaultProps = {
        actions: [],
        size: "large",
        openInSameTab: false,
    };
    return ResourceTile;
}(React.PureComponent));
export { ResourceTile };
