"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 __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 __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");
// import { BuilderElement } from '@builder.io/sdk'
var builder_block_decorator_1 = require("../decorators/builder-block.decorator");
var builder_blocks_component_1 = require("../components/builder-blocks.component");
var sdk_1 = require("@builder.io/sdk");
var device_sizes_constant_1 = require("../constants/device-sizes.constant");
var react_native_1 = require("react-native");
var DEFAULT_ASPECT_RATIO = 0.7004048582995948;
var defaultBlocks /*: BuilderElement[] */ = [
    {
        '@type': '@builder.io/sdk:Element',
        responsiveStyles: {
            large: {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'stretch',
                flexShrink: '0',
                position: 'relative',
                marginTop: '30px',
                textAlign: 'center',
                lineHeight: 'normal',
                height: 'auto',
            },
        },
        component: {
            name: 'Image',
            options: {
                image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
                backgroundPosition: 'center',
                backgroundSize: 'cover',
                aspectRatio: DEFAULT_ASPECT_RATIO,
            },
        },
    },
    {
        '@type': '@builder.io/sdk:Element',
        responsiveStyles: {
            large: {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'stretch',
                flexShrink: '0',
                position: 'relative',
                marginTop: '30px',
                textAlign: 'center',
                lineHeight: 'normal',
                height: 'auto',
            },
        },
        component: {
            name: 'Text',
            options: {
                text: '<p>Enter some text...</p>',
            },
        },
    },
];
var Columns = /** @class */ (function (_super) {
    __extends(Columns, _super);
    function Columns() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(Columns.prototype, "columns", {
        // TODO: Column interface
        get: function () {
            return this.props.columns || [];
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Columns.prototype, "gutterSize", {
        get: function () {
            return typeof this.props.space === 'number' ? this.props.space || 0 : 20;
        },
        enumerable: true,
        configurable: true
    });
    Columns.prototype.getWidth = function (index) {
        return (this.columns[index] && this.columns[index].width) || 100 / this.columns.length;
    };
    Columns.prototype.getColumnWidth = function (index) {
        var _a = this, columns = _a.columns, gutterSize = _a.gutterSize;
        var subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
        return "calc(" + this.getWidth(index) + "% - " + subtractWidth + "px)";
    };
    Object.defineProperty(Columns.prototype, "deviceSizeState", {
        get: function () {
            var sizeMap = {
                desktop: 'large',
                tablet: 'medium',
                mobile: 'small',
            };
            // TODO: use context to pass this down on server
            return sdk_1.Builder.isBrowser
                ? device_sizes_constant_1.sizes.getSizeForWidth(window.innerWidth)
                : sizeMap[this.device] || 'large';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Columns.prototype, "device", {
        get: function () {
            return sdk_1.builder.getUserAttributes().device || 'desktop';
        },
        enumerable: true,
        configurable: true
    });
    Columns.prototype.render = function () {
        var _this = this;
        var _a = this, columns = _a.columns, gutterSize = _a.gutterSize;
        var size = this.deviceSizeState;
        var stack = device_sizes_constant_1.sizeNames.indexOf(size) <= device_sizes_constant_1.sizeNames.indexOf(this.props.stackColumnsAt);
        return (
        // FIXME: make more elegant
        react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(react_native_1.View, { style: { display: 'flex' } }, columns.map(function (col, index) {
                // TODO: pass size down in context
                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
                    react_1.default.createElement(react_native_1.View
                    // TODO: handle links!
                    , __assign({}, (col.link ? { href: col.link } : null), { 
                        // TODO: generate width and margin-left as CSS instead so can override with pure CSS for best responsieness
                        // and no use of !important
                        style: {
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'stretch',
                        } }),
                        react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { key: index, 
                            // TODO: childOf [parentBlocks]?
                            child: true, parentElementId: _this.props.builderBlock && _this.props.builderBlock.id, blocks: col.blocks, dataPath: "component.options.columns." + index + ".blocks" }))));
            }))));
    };
    Columns = __decorate([
        builder_block_decorator_1.BuilderBlock({
            name: 'Columns',
            inputs: [
                {
                    name: 'columns',
                    type: 'array',
                    subFields: [
                        {
                            name: 'blocks',
                            type: 'array',
                            hideFromUI: true,
                            defaultValue: defaultBlocks,
                        },
                        {
                            name: 'width',
                            type: 'number',
                            hideFromUI: true,
                            helperText: 'Width %, e.g. set to 50 to fill half of the space',
                        },
                        {
                            name: 'link',
                            type: 'string',
                            helperText: 'Optionally set a url that clicking this column will link to',
                        },
                    ],
                    defaultValue: [{ blocks: defaultBlocks }, { blocks: defaultBlocks }],
                    onChange: function (options) {
                        function clearWidths() {
                            columns.forEach(function (col) {
                                col.delete('width');
                            });
                        }
                        var columns = options.get('columns');
                        if (Array.isArray(columns)) {
                            var containsColumnWithWidth = !!columns.find(function (col) { return col.get('width'); });
                            if (containsColumnWithWidth) {
                                var containsColumnWithoutWidth = !!columns.find(function (col) { return !col.get('width'); });
                                if (containsColumnWithoutWidth) {
                                    clearWidths();
                                }
                                else {
                                    var sumWidths = columns.reduce(function (memo, col) {
                                        return memo + col.get('width');
                                    }, 0);
                                    var widthsDontAddUp = sumWidths !== 100;
                                    if (widthsDontAddUp) {
                                        clearWidths();
                                    }
                                }
                            }
                        }
                    },
                },
                {
                    name: 'space',
                    type: 'number',
                    defaultValue: 20,
                    helperText: 'Size of gap between columns',
                    advanced: true,
                },
                {
                    name: 'stackColumnsAt',
                    type: 'string',
                    defaultValue: 'tablet',
                    helperText: 'Convert horizontal columns to vertical at what device size',
                    enum: ['tablet', 'mobile', 'never'],
                    advanced: true,
                },
                {
                    name: 'reverseColumnsWhenStacked',
                    type: 'boolean',
                    defaultValue: false,
                    helperText: 'When stacking columns for mobile devices, reverse the ordering',
                    advanced: true,
                },
            ],
        })
    ], Columns);
    return Columns;
}(react_1.default.Component));
exports.Columns = Columns;
//# sourceMappingURL=Columns.js.map