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 React from 'react';
import styled, { css } from 'react-emotion';
import { Draggable } from 'react-beautiful-dnd';
import PropertyInput from './PropertyInput';
import config from '../../config/threed';
import { Icon } from '@bitbloq/ui';
var objectOperationsMap = {};
config.objectOperations.forEach(function (operation) { return (objectOperationsMap[operation.name] = operation); });
var Wrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 3px;\n  border-left: 5px solid ", ";\n  margin: 4px 0px;\n  ", ";\n"], ["\n  border-radius: 3px;\n  border-left: 5px solid ", ";\n  margin: 4px 0px;\n  ",
    ";\n"])), function (props) { return props.color; }, function (props) {
    return props.isDragging && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: 0 0 0 2px #4dc3ff;\n    "], ["\n      box-shadow: 0 0 0 2px #4dc3ff;\n    "])));
});
var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: white;\n  border: 1px solid #ebebeb;\n  border-radius: 0px 3px 3px 0px;\n"], ["\n  background-color: white;\n  border: 1px solid #ebebeb;\n  border-radius: 0px 3px 3px 0px;\n"])));
var HeaderContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  height: 40px;\n  flex: 1;\n  align-items: center;\n  font-weight: bold;\n  font-size: 14px;\n  padding-left: 10px;\n\n  svg {\n    transform: rotate(-90deg);\n    margin: 0px 8px 0px 2px;\n  }\n"], ["\n  display: flex;\n  height: 40px;\n  flex: 1;\n  align-items: center;\n  font-weight: bold;\n  font-size: 14px;\n  padding-left: 10px;\n\n  svg {\n    transform: rotate(-90deg);\n    margin: 0px 8px 0px 2px;\n  }\n"])));
var HeaderButtons = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: none;\n  margin-right: 15px;\n"], ["\n  display: none;\n  margin-right: 15px;\n"])));
var HeaderButton = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: #8c919b;\n  padding: 0px 5px;\n  svg {\n    height: auto;\n    width: 12px;\n  }\n"], ["\n  color: #8c919b;\n  padding: 0px 5px;\n  svg {\n    height: auto;\n    width: 12px;\n  }\n"])));
var Handler = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 18px;\n  margin: 0px 6px;\n  color: #cccccc;\n  display: none;\n"], ["\n  height: 18px;\n  margin: 0px 6px;\n  color: #cccccc;\n  display: none;\n"])));
var Header = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 40px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  background-color: #ebebeb;\n\n  ", ";\n\n  ", "\n\n  &:hover ", " {\n    display: ", ";\n  }\n"], ["\n  height: 40px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  background-color: #ebebeb;\n\n  ",
    ";\n\n  ",
    "\n\n  &:hover ", " {\n    display: ", ";\n  }\n"])), function (props) {
    return props.isOpen && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      ", " svg {\n        transform: rotate(0deg);\n      }\n    "], ["\n      ", " svg {\n        transform: rotate(0deg);\n      }\n    "])), HeaderContent);
}, function (props) {
    return props.advancedMode && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      ", " {\n        display: block;\n      }\n\n      ", " {\n        padding-left: 0px;\n      }\n    "], ["\n      ", " {\n        display: block;\n      }\n\n      ", " {\n        padding-left: 0px;\n      }\n    "])), Handler, HeaderContent);
}, HeaderButtons, function (props) { return (props.advancedMode ? 'block' : 'none'); });
var Title = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
var Content = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding: 20px;\n  font-size: 13px;\n"], ["\n  padding: 20px;\n  font-size: 13px;\n"])));
var Operation = /** @class */ (function (_super) {
    __extends(Operation, _super);
    function Operation() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onTitleClick = function (e) {
            var _a = _this.props, onOpen = _a.onOpen, isOpen = _a.isOpen;
            if (onOpen) {
                onOpen(!isOpen);
            }
        };
        return _this;
    }
    Operation.prototype.render = function () {
        var _this = this;
        var _a = this.props, index = _a.index, operation = _a.operation, onParameterChange = _a.onParameterChange, onParameterFocus = _a.onParameterFocus, onParameterBlur = _a.onParameterBlur, isOpen = _a.isOpen, onOpen = _a.onOpen, onRemove = _a.onRemove, advancedMode = _a.advancedMode;
        var _b = objectOperationsMap[operation.type], label = _b.label, basicLabel = _b.basicLabel, parameters = _b.parameters, color = _b.color;
        return (React.createElement(Draggable, { draggableId: operation.id, index: index }, function (provided, snapshot) { return (React.createElement(Wrap, __assign({}, provided.draggableProps, { innerRef: provided.innerRef, isDragging: snapshot.isDragging, color: color }),
            React.createElement(Container, null,
                React.createElement(Header, { isOpen: isOpen, advancedMode: advancedMode },
                    React.createElement(Handler, __assign({}, provided.dragHandleProps, { onMouseDown: function (e) {
                            e.persist();
                            onOpen(false, function () {
                                return provided.dragHandleProps.onMouseDown(e);
                            });
                        } }),
                        React.createElement(Icon, { name: "drag" })),
                    React.createElement(HeaderContent, { onClick: _this.onTitleClick },
                        React.createElement(Icon, { name: "angle" }),
                        React.createElement(Title, null, advancedMode ? label : basicLabel || label)),
                    React.createElement(HeaderButtons, null,
                        React.createElement(HeaderButton, { onClick: onRemove },
                            React.createElement(Icon, { name: "trash" })))),
                isOpen && (React.createElement(Content, null, parameters.map(function (parameter) {
                    if ((parameter.advancedMode && !advancedMode) ||
                        (parameter.basicMode && advancedMode)) {
                        return;
                    }
                    var value = parameter.getValue
                        ? parameter.getValue(operation)
                        : operation[parameter.name];
                    return (React.createElement(PropertyInput, { key: parameter.name, parameter: parameter, value: value, onChange: function (value) { return onParameterChange(parameter, value); }, onFocus: function () { return onParameterFocus(parameter); }, onBlur: function () { return onParameterBlur(parameter); } }));
                })))))); }));
    };
    return Operation;
}(React.Component));
export default Operation;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
//# sourceMappingURL=Operation.js.map