var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
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 __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import * as React from 'react';
import { connect } from 'react-redux';
import styled, { css } from 'react-emotion';
import Tooltip from '../Tooltip';
import { createObject, undo, redo } from '../../actions/threed';
import { getObjects, getSelectedObjects } from '../../reducers/threed/';
import { Icon } from '@bitbloq/ui';
import config from '../../config/threed';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 50px;\n  border-bottom: 1px solid #cfcfcf;\n  padding: 0px 20px;\n  display: flex;\n"], ["\n  height: 50px;\n  border-bottom: 1px solid #cfcfcf;\n  padding: 0px 20px;\n  display: flex;\n"])));
var Button = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: #ebebeb;\n  width: 60px;\n  border-width: 0px 1px;\n  border-style: solid;\n  border-color: #cfcfcf;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -1px;\n\n  img {\n    width: 20px;\n    height: auto;\n  }\n\n  ", ";\n"], ["\n  background-color: #ebebeb;\n  width: 60px;\n  border-width: 0px 1px;\n  border-style: solid;\n  border-color: #cfcfcf;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -1px;\n\n  img {\n    width: 20px;\n    height: auto;\n  }\n\n  ",
    ";\n"])), function (props) {
    return props.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: #bdc0c6;\n      cursor: not-allowed;\n    "], ["\n      color: #bdc0c6;\n      cursor: not-allowed;\n    "])));
});
var Operations = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n"], ["\n  flex: 1;\n  display: flex;\n"])));
var UndoRedo = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
var selectTopObject = (React.createElement("span", null, "Selecciona objetos de primer nivel para poder usar esta herramienta"));
var selectMultipleMessage = (React.createElement("span", null,
    "Selecciona varios objetos pulsando ",
    React.createElement("i", null, "\u201CControl + clic\u201D"),
    " en cada uno de ellos para utilizar esta herramienta"));
var selectOneMessage = (React.createElement("span", null, "Selecciona un \u00FAnico objeto para utilizar esta herramienta"));
var Toolbar = /** @class */ (function (_super) {
    __extends(Toolbar, _super);
    function Toolbar() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Toolbar.prototype.onComposeObjects = function (operation) {
        var _a = this.props, createObject = _a.createObject, selectedObjects = _a.selectedObjects, advancedMode = _a.advancedMode;
        var object = __assign({}, operation.create(selectedObjects), { operations: config.defaultOperations(advancedMode) });
        createObject(object);
    };
    Toolbar.prototype.render = function () {
        var _this = this;
        var _a = this.props, objects = _a.objects, selectedObjects = _a.selectedObjects, advancedMode = _a.advancedMode, undo = _a.undo, redo = _a.redo, canUndo = _a.canUndo, canRedo = _a.canRedo;
        return (React.createElement(Container, null,
            React.createElement(Operations, null, config.compositionOperations.map(function (operation) {
                if (operation.advancedMode && !advancedMode)
                    return;
                var _a = operation.minObjects, minObjects = _a === void 0 ? 0 : _a, _b = operation.maxObjects, maxObjects = _b === void 0 ? Infinity : _b;
                var numObjects = selectedObjects.length;
                var topObjects = selectedObjects.every(function (o) { return objects.includes(o); });
                var canApply = topObjects &&
                    (numObjects >= minObjects && numObjects <= maxObjects);
                var tooltipContent;
                if (canApply) {
                    tooltipContent = operation.label;
                }
                else {
                    if (!topObjects) {
                        tooltipContent = selectTopObject;
                    }
                    else if (minObjects > 1) {
                        tooltipContent = selectMultipleMessage;
                    }
                    else if (maxObjects === 1) {
                        tooltipContent = selectOneMessage;
                    }
                }
                return (React.createElement(Tooltip, { key: operation.name, content: tooltipContent }, function (tooltipProps) { return (React.createElement(Button, __assign({}, tooltipProps, { disabled: !canApply, onClick: function () {
                        return canApply && _this.onComposeObjects(operation);
                    } }), operation.icon)); }));
            })),
            React.createElement(UndoRedo, null,
                React.createElement(Tooltip, { content: "Undo" }, function (tooltipProps) { return (React.createElement(Button, __assign({}, tooltipProps, { disabled: !canUndo, onClick: function () { return canUndo && undo(); } }),
                    React.createElement(Icon, { name: "undo" }))); }),
                React.createElement(Tooltip, { content: "Redo" }, function (tooltipProps) { return (React.createElement(Button, __assign({}, tooltipProps, { disabled: !canRedo, onClick: function () { return canRedo && redo(); } }),
                    React.createElement(Icon, { name: "redo" }))); }))));
    };
    return Toolbar;
}(React.Component));
var mapStateToProps = function (_a) {
    var threed = _a.threed;
    return ({
        objects: getObjects(threed),
        selectedObjects: getSelectedObjects(threed),
        advancedMode: threed.ui.advancedMode,
        canUndo: false,
        canRedo: false,
    });
};
var mapDispatchToProps = {
    createObject: createObject,
    undo: undo,
    redo: redo,
};
export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=Toolbar.js.map