"use strict";
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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResourceTile = exports.CssClasses = void 0;
var classnames = require("classnames");
var index_1 = require("../index");
var DragHandleIcon_1 = require("./DragHandleIcon");
var React = require("react");
var FontAwesome = require("react-fontawesome");
require("./ResourceTile.less");
var TITLE_MAX_LENGTH = 30;
exports.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(exports.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(index_1.FlexBox, { alignItems: index_1.ItemAlign.CENTER, className: exports.CssClasses.OVERLAY, justify: index_1.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(index_1.FlexBox, { className: classnames(exports.CssClasses.CONTAINER, SizeCssClasses[size], className), column: true, alignItems: index_1.ItemAlign.CENTER, alignSelf: index_1.ItemAlign.START },
            React.createElement(index_1.FlexBox, { className: exports.CssClasses.LINK, column: true, component: "a", href: url, onClick: onClick, target: openInSameTab ? "_self" : "_blank" },
                React.createElement(index_1.FlexBox, { className: exports.CssClasses.ICON_CONTAINER, justify: index_1.Justify.CENTER, alignItems: index_1.ItemAlign.CENTER }, this.renderIcon()),
                React.createElement(index_1.FlexBox, { className: exports.CssClasses.TITLE_CONTAINER, column: true, alignItems: index_1.ItemAlign.CENTER },
                    React.createElement(index_1.FlexBox, { className: exports.CssClasses.TITLE_AND_NOTES, alignItems: index_1.ItemAlign.CENTER },
                        title.length > TITLE_MAX_LENGTH ? (React.createElement(index_1.Tooltip, { content: title, placement: index_1.Tooltip.Placement.TOP, textAlign: index_1.Tooltip.Align.CENTER },
                            React.createElement("span", { className: exports.CssClasses.TITLE }, title.substring(0, TITLE_MAX_LENGTH) + "\u2026"))) : (React.createElement("span", { className: exports.CssClasses.TITLE }, title)),
                        notes && (React.createElement(index_1.Tooltip, { content: notes, placement: index_1.Tooltip.Placement.TOP, textAlign: index_1.Tooltip.Align.LEFT },
                            React.createElement(FontAwesome, { className: exports.CssClasses.NOTES, name: "question-circle" })))),
                    additionalInfo && (React.createElement(index_1.FlexBox, { className: exports.CssClasses.ADDITIONAL_INFO, alignSelf: index_1.ItemAlign.STRETCH, justify: index_1.Justify.CENTER }, additionalInfo))),
                notify && React.createElement("span", { className: exports.CssClasses.NOTIFICATION })),
            this.renderOverlays(),
            !!actions.length && (React.createElement(index_1.FlexBox, { column: true }, actions.map(function (action, i) { return (React.createElement(index_1.FlexBox, { className: classnames(exports.CssClasses.ACTION), key: "dewey--ResourceTileAction--" + i },
                React.createElement(index_1.Button, { className: exports.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_1.DragHandleIcon, { className: exports.CssClasses.DRAGGABLE_ICON })));
    };
    ResourceTile.defaultProps = {
        actions: [],
        size: "large",
        openInSameTab: false,
    };
    return ResourceTile;
}(React.PureComponent));
exports.ResourceTile = ResourceTile;
