"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 __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var builder_block_decorator_1 = require("../decorators/builder-block.decorator");
var builder_block_component_1 = require("../components/builder-block.component");
var react_native_1 = require("react-native");
// TODO: acceptsChildren option?
var Section = /** @class */ (function (_super) {
    __extends(Section, _super);
    function Section() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Section.prototype.render = function () {
        return (react_1.default.createElement(react_native_1.View, { style: {
                // margin: 'auto',
                // TODO: maybe remove height: '100%'
                height: '100%',
                width: '100%',
                alignSelf: 'stretch',
                flexGrow: 1,
                // boxSizing: 'border-box',
                maxWidth: this.props.maxWidth,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'stretch',
                marginLeft: 'auto',
                marginRight: 'auto',
            } }, this.props.builderBlock &&
            this.props.builderBlock.children &&
            this.props.builderBlock.children.map(function (block, index) { return (react_1.default.createElement(builder_block_component_1.BuilderBlock, { key: block.id, block: block })); })));
    };
    Section = __decorate([
        builder_block_decorator_1.BuilderBlock({
            name: 'Core:Section',
            image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',
            inputs: [
                {
                    name: 'maxWidth',
                    type: 'number',
                    defaultValue: 1200,
                },
            ],
            defaultStyles: {
                paddingLeft: '20px',
                paddingRight: '20px',
                paddingTop: '50px',
                paddingBottom: '50px',
                marginTop: '0px',
                width: '100vw',
                marginLeft: 'calc(50% - 50vw)',
            },
            canHaveChildren: true,
            // TODO: defaults that deep merge and can be anyting - responsive styles, etc
            defaultChildren: [
                {
                    '@type': '@builder.io/sdk:Element',
                    responsiveStyles: {
                        large: {
                            textAlign: 'center',
                        },
                    },
                    component: {
                        name: 'Text',
                        options: {
                            text: "<p><b>I am a section! My content keeps from getting too wide, so that it's easy to read even on big screens.</b></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
                        },
                    },
                },
            ],
        })
    ], Section);
    return Section;
}(react_1.default.Component));
exports.Section = Section;
//# sourceMappingURL=Section.js.map