import { __assign, __extends } from "tslib";
import * as React from 'react';
import { CollapsibleSection, } from '@uifabric/experiments';
import { Label, Spinner } from 'office-ui-fabric-react';
var AsyncData = /** @class */ (function (_super) {
    __extends(AsyncData, _super);
    function AsyncData(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { loading: true };
        return _this;
    }
    AsyncData.prototype.componentDidMount = function () {
        var _this = this;
        setTimeout(function () { return _this.setState({ loading: false }); }, 3000);
    };
    AsyncData.prototype.render = function () {
        var loading = this.state.loading;
        var _a = this.props, render = _a.render, data = _a.data;
        return render(loading ? undefined : data);
    };
    return AsyncData;
}(React.Component));
var titleTextStyles = function (props, theme) { return ({
    text: [
        theme.fonts.large,
        {
            fontWeight: 800,
        },
    ],
}); };
// TODO: use extendsComponent to create variants and clean up these examples
var titleTextRender = function (props, DefaultComponent) { return (React.createElement(AsyncData, { data: "done", 
    // eslint-disable-next-line react/jsx-no-bind
    render: function (data) {
        return data ? React.createElement(DefaultComponent, __assign({}, props)) : React.createElement(Spinner, { styles: { root: { alignItems: 'flex-start' } } });
    } })); };
var bodyRender = function (props, DefaultComponent) { return (React.createElement(AsyncData, { data: "done", 
    // eslint-disable-next-line react/jsx-no-bind
    render: function (data) { return (React.createElement("div", { style: { border: '1px solid black' } },
        React.createElement(DefaultComponent, __assign({}, props), data ? React.createElement(Label, null, props.children) : React.createElement(Spinner, { styles: { root: { alignItems: 'flex-start' } } })))); } })); };
var SlotsAsyncExample = /** @class */ (function (_super) {
    __extends(SlotsAsyncExample, _super);
    function SlotsAsyncExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SlotsAsyncExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(CollapsibleSection, { key: 1, defaultCollapsed: true, title: {
                    styles: titleTextStyles,
                    text: { children: 'Title Text' },
                    slots: {
                        text: {
                            render: titleTextRender,
                        },
                    },
                }, slots: {
                    body: {
                        render: bodyRender,
                    },
                } }, "Data loaded")));
    };
    return SlotsAsyncExample;
}(React.Component));
export { SlotsAsyncExample };
//# sourceMappingURL=Slots.Async.Example.js.map