"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var reactDom = require("react-dom");
var React = require("react");
var react_1 = require("@builder.io/react");
function ComponentLoader(props) {
    var _a = React.useState(null), value = _a[0], setValue = _a[1];
    var _b = React.useState(props.content), content = _b[0], setContent = _b[1];
    function valueChangeListner(event) {
        var data = event.data;
        // TODO: message for values and value change
        if (data && data.type === 'builder.updateEditorValue') {
            setValue(data.data.value);
        }
        else if (data && data.type === 'builder.loadContent') {
            setContent(data.data.content);
        }
    }
    React.useEffect(function () {
        addEventListener('message', valueChangeListner);
        return function () { return removeEventListener('message', valueChangeListner); };
    }, []);
    return (React.createElement(react_1.BuilderComponent, { content: {
            data: {
                blocks: [
                    {
                        '@type': '@builder.io/sdk:Element',
                        responsiveStyles: {
                            large: {
                                height: '50px',
                                width: '50px',
                                backgroundColor: 'red'
                            }
                        },
                        component: {
                            name: 'Text',
                            options: {
                                text: 'Hello!'
                            }
                        }
                    }
                ]
            }
        }, model: "page", apiKey: "YJIGb4i01jvw0SRdL5Bt", data: {
            value: value
        }, onStateChange: function (state) {
            setValue(state.value);
            self.postMessage({
                type: 'builder.workerEditorValueChange',
                data: {
                    value: state.value
                }
            }, undefined);
            // TODO: message up
        } }));
}
reactDom.render(React.createElement(ComponentLoader, {
// content: data.data.content
// Send value down and up
}), document.body);
var loaded = false;
if (typeof self !== 'undefined') {
    self.addEventListener('message', function (event) {
        console.log('message?', event.data, event);
        var data = event.data;
        // TODO: message for values and value change
        if (data && data.type === 'builder.loadContent' && !loaded) {
            loaded = true;
            reactDom.render(React.createElement(ComponentLoader, {
                content: data.data.content
                // Send value down and up
            }), document.body);
        }
    });
    self.postMessage({
        type: 'builder.workerLoaded',
        data: {
            type: 'content'
        }
    }, undefined);
}
//# sourceMappingURL=content-loader.js.map