"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);
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var react_2 = require("@builder.io/react");
var defaultTab = {
    '@type': '@builder.io/sdk:Element',
    responsiveStyles: {
        large: {
            paddingLeft: '20px',
            paddingRight: '20px',
            paddingTop: '10px',
            paddingBottom: '10px',
            minWidth: '100px',
            textAlign: 'center',
            // TODO: add to all
            display: 'flex',
            flexDirection: 'column',
            cursor: 'pointer',
            userSelect: 'none'
        }
    },
    component: {
        // Builder:text
        name: 'Text',
        options: {
            text: 'New tab'
        }
    }
};
var defaultElement = {
    '@type': '@builder.io/sdk:Element',
    responsiveStyles: {
        large: {
            height: '200px',
            display: 'flex',
            marginTop: '20px',
            flexDirection: 'column'
        }
    },
    component: {
        name: 'Text',
        options: {
            text: 'New tab content '
        }
    }
};
var TabsComponent = /** @class */ (function (_super) {
    __extends(TabsComponent, _super);
    function TabsComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            activeTab: 0
        };
        return _this;
    }
    Object.defineProperty(TabsComponent.prototype, "activeTabSpec", {
        get: function () {
            return this.props.tabs && this.props.tabs[this.state.activeTab];
        },
        enumerable: true,
        configurable: true
    });
    TabsComponent.prototype.componentWillMount = function () {
        if (this.props.defaultActiveTab) {
            this.activeTab = this.props.defaultActiveTab - 1;
        }
    };
    Object.defineProperty(TabsComponent.prototype, "activeTab", {
        get: function () {
            return this.state.activeTab;
        },
        set: function (tab) {
            this.setState(__assign(__assign({}, this.state), { activeTab: tab }));
        },
        enumerable: true,
        configurable: true
    });
    TabsComponent.prototype.render = function () {
        var _this = this;
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("span", { style: {
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: this.props.tabHeaderLayout,
                    overflow: 'auto',
                    WebkitOverflowScrolling: 'touch'
                }, className: "builder-tabs-wrap" }, this.props.tabs &&
                this.props.tabs.map(function (item, index) { return (react_1.default.createElement("span", { key: index, className: 'builder-tab-wrap ' +
                        (_this.activeTabSpec === item ? 'builder-tab-active' : ''), style: __assign({}, ((_this.activeTabSpec === item &&
                        _this.props.activeTabStyle) ||
                        undefined)), onClick: function () {
                        if (index === _this.activeTab && _this.props.collapsible) {
                            _this.activeTab = -1;
                        }
                        else {
                            _this.activeTab = index;
                        }
                    } },
                    react_1.default.createElement(react_2.BuilderBlocks
                    // TODO: parent={this.props.builderBlock}
                    , { 
                        // TODO: parent={this.props.builderBlock}
                        parentElementId: _this.props.builderBlock.id, 
                        // TODO: start with just "tabs." when bump react version
                        dataPath: "component.options.tabs." + _this.state.activeTab + ".label", blocks: item.label }))); })),
            this.activeTabSpec && (react_1.default.createElement(react_2.BuilderBlocks, { parentElementId: this.props.builderBlock.id, dataPath: "component.options.tabs." + this.state.activeTab + ".content", blocks: this.activeTabSpec.content }))));
    };
    return TabsComponent;
}(react_1.default.Component));
exports.Tabs = react_2.withBuilder(TabsComponent, {
    name: 'Builder: Tabs',
    inputs: [
        {
            name: 'tabs',
            type: 'list',
            subFields: [
                {
                    name: 'label',
                    type: 'uiBlocks',
                    hideFromUI: true,
                    defaultValue: [defaultTab]
                },
                {
                    name: 'content',
                    type: 'uiBlocks',
                    hideFromUI: true,
                    defaultValue: [defaultElement]
                }
            ],
            defaultValue: [
                {
                    label: [
                        __assign(__assign({}, defaultTab), { component: {
                                name: 'Text',
                                options: {
                                    text: 'Tab 1'
                                }
                            } })
                    ],
                    content: [
                        __assign(__assign({}, defaultElement), { component: {
                                name: 'Text',
                                options: {
                                    text: 'Tab 1 content'
                                }
                            } })
                    ]
                },
                {
                    label: [
                        __assign(__assign({}, defaultTab), { component: {
                                name: 'Text',
                                options: {
                                    text: 'Tab 2'
                                }
                            } })
                    ],
                    content: [
                        __assign(__assign({}, defaultElement), { component: {
                                name: 'Text',
                                options: {
                                    text: 'Tab 2 content'
                                }
                            } })
                    ]
                }
            ]
        },
        {
            name: 'activeTabStyle',
            type: 'uiStyle',
            helperText: 'CSS styles for the active tab',
            defaultValue: {
                backgroundColor: 'rgba(0, 0, 0, 0.1)'
            }
        },
        {
            name: 'defaultActiveTab',
            type: 'number',
            helperText: 'Deafult tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
            defaultValue: 1,
            advanced: true
        },
        {
            name: 'collapsible',
            type: 'boolean',
            helperText: 'If on, clicking an open tab closes it so no tabs are active',
            defaultValue: false,
            advanced: true
        },
        {
            name: 'tabHeaderLayout',
            type: 'enum',
            helperText: 'Change the layout of the tab headers (uses justify-content)',
            defaultValue: 'flex-start',
            enum: [
                { label: 'Center', value: 'center' },
                { label: 'Space between', value: 'space-between' },
                { label: 'Space around', value: 'space-around' },
                { label: 'Left', value: 'flex-start' },
                { label: 'Right', value: 'flex-end' }
            ]
        }
    ]
});
//# sourceMappingURL=Tabs.js.map