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);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
import React from 'react';
import styled, { css } from 'react-emotion';
import { Select } from '@bitbloq/ui';
import EventShape from './EventShape';
import StatementShape from './StatementShape';
import CodeBlockShape from './CodeBlockShape';
import BooleanShape from './BooleanShape';
var shapeComponents = {
    event: EventShape,
    statement: StatementShape,
    codeblock: CodeBlockShape,
    boolean: BooleanShape,
};
var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  cursor: grab;\n  ", ";\n"], ["\n  height: ", "px;\n  width: ", "px;\n  cursor: grab;\n  ",
    ";\n"])), function (props) { return props.shapeHeight; }, function (props) { return props.contentWidth; }, function (props) {
    return props.isDragging && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: grabbing;\n      filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));\n    "], ["\n      cursor: grabbing;\n      filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));\n    "])));
});
var BloqShape = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: -20px 0px 0px -20px;\n  height: ", "px;\n  width: ", "px;\n  pointer-events: none;\n"], ["\n  margin: -20px 0px 0px -20px;\n  height: ", "px;\n  width: ", "px;\n  pointer-events: none;\n"])), function (props) { return props.shapeHeight + 40; }, function (props) { return props.contentWidth + 40; });
var BloqShapeWrap = styled.g(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  opacity: ", ";\n  transform: translate(20px, 20px);\n"], ["\n  opacity: ", ";\n  transform: translate(20px, 20px);\n"])), function (props) { return (props.isGhost ? 0.4 : 1); });
var BloqPlaceholder = styled.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 80px;\n  height: ", "px;\n"], ["\n  width: 80px;\n  height: ", "px;\n"])), function (props) { return props.shapeHeight; });
var Content = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  height: 30px;\n  display: flex;\n  color: white;\n  user-select: none;\n  align-items: center;\n  padding: 0px 6px;\n\n  & > * {\n    margin: 0px 6px;\n  }\n"], ["\n  position: absolute;\n  top: 10px;\n  left: 0px;\n  height: 30px;\n  display: flex;\n  color: white;\n  user-select: none;\n  align-items: center;\n  padding: 0px 6px;\n\n  & > * {\n    margin: 0px 6px;\n  }\n"])));
var Label = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
var Input = styled.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 80px;\n  font-family: Jua;\n  height: 26px;\n  padding: 0px 6px;\n  border-radius: 4px;\n  font-size: 0.8em;\n  border: 1px solid hsl(0, 0%, 80%);\n"], ["\n  width: 80px;\n  font-family: Jua;\n  height: 26px;\n  padding: 0px 6px;\n  border-radius: 4px;\n  font-size: 0.8em;\n  border: 1px solid hsl(0, 0%, 80%);\n"])));
var ContentBloq = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
function BloqFactory(getType, getOptions) {
    if (getOptions === void 0) { getOptions = function () { return []; }; }
    var ContentItem = function (_a) {
        var type = _a.type, bloq = _a.bloq, onChange = _a.onChange, props = __rest(_a, ["type", "bloq", "onChange"]);
        var value = bloq.data && bloq.data[props.dataField];
        switch (type) {
            case 'label':
                return React.createElement(Label, null, props.text);
            case 'select':
                return (React.createElement(Select, { options: getOptions(props), value: value, onMouseDown: function (e) { return e.stopPropagation(); }, onChange: onChange }));
            case 'input':
                return (React.createElement(Input, { type: "text", value: value || '', onMouseDown: function (e) { return e.stopPropagation(); }, onChange: function (e) { return onChange(e.target.value); } }));
            case 'bloq':
                var shapeComponent = shapeComponents[props.bloqType];
                if (value) {
                    return (React.createElement(ContentBloq, null,
                        React.createElement(Bloq, { bloq: value })));
                }
                else {
                    return (React.createElement(BloqPlaceholder, { shapeHeight: shapeComponent.getHeight() }, React.createElement(shapeComponent, { isPlaceholder: true })));
                }
            default:
                return null;
        }
    };
    var Bloq = /** @class */ (function (_super) {
        __extends(Bloq, _super);
        function Bloq() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.state = {
                contentWidth: 0,
            };
            _this.contentRef = React.createRef();
            return _this;
        }
        Bloq.getHeight = function (bloq, nextIncluded) {
            var bloqType = getType(bloq.type) || {};
            var shapeComponent = shapeComponents[bloqType.type];
            var _a = bloq.children, children = _a === void 0 ? [] : _a;
            var childrenHeight = children.length > 0 ? Bloq.getHeight(children[0], true) : 0;
            var height = shapeComponent.getHeight(childrenHeight);
            if (nextIncluded && bloq.next) {
                return height + Bloq.getHeight(bloq.next, true);
            }
            else {
                return height;
            }
        };
        Bloq.prototype.componentDidMount = function () {
            this.updateContentWidth();
        };
        Bloq.prototype.componentDidUpdate = function (prevProps) {
            var _a = this.props.bloq, bloq = _a === void 0 ? {} : _a;
            var _b = prevProps.bloq, prevBloq = _b === void 0 ? {} : _b;
            if (bloq.type !== prevBloq.type || bloq.data !== prevBloq.data) {
                this.updateContentWidth();
            }
        };
        Bloq.prototype.getContentRects = function () {
            if (this.contentRef.current) {
                return Array.from(this.contentRef.current.children).map(function (item) {
                    return item.getBoundingClientRect();
                });
            }
            else {
                return [];
            }
        };
        Bloq.prototype.updateContentWidth = function () {
            if (this.contentRef.current) {
                var width_1 = this.contentRef.current.getBoundingClientRect().width;
                if (width_1 !== this.state.contentWidth) {
                    this.setState(function (state) { return (__assign({}, state, { contentWidth: width_1 })); });
                }
            }
        };
        Bloq.prototype.render = function () {
            var contentWidth = this.state.contentWidth;
            var _a = this.props, className = _a.className, bloq = _a.bloq, onChange = _a.onChange, isDragging = _a.isDragging, getChildrenHeight = _a.getChildrenHeight;
            var _b = bloq.children, children = _b === void 0 ? [] : _b;
            var bloqType = getType(bloq.type) || {};
            var _c = bloqType.content, content = _c === void 0 ? [] : _c;
            return (React.createElement(Container, { className: className, shapeHeight: Bloq.getHeight(bloq), isDragging: isDragging, contentWidth: contentWidth },
                React.createElement(BloqShape, { shapeHeight: Bloq.getHeight(bloq), contentWidth: contentWidth },
                    React.createElement(BloqShapeWrap, { isGhost: bloq.isGhost }, React.createElement(shapeComponents[bloqType.type], {
                        width: contentWidth,
                        childrenHeight: children[0]
                            ? Bloq.getHeight(children[0], true)
                            : 0,
                    }))),
                React.createElement(Content, { innerRef: this.contentRef }, content.map(function (item, i) { return (React.createElement(ContentItem, __assign({}, item, { key: i, bloq: bloq, onChange: function (value) {
                        var _a;
                        return onChange(__assign({}, bloq, { data: __assign({}, bloq.data, (_a = {}, _a[item.dataField] = value, _a)) }));
                    } }))); }))));
        };
        return Bloq;
    }(React.Component));
    return Bloq;
}
export default BloqFactory;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=BloqFactory.js.map