"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Playground = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
var react_text_1 = require("@fluentui/react-text");
var tableStyle = {
    border: '1px solid black',
};
var cellStyle = {
    border: '1px solid black',
    padding: '5px',
};
var Playground = function (props) {
    var _a;
    var children = props.children, sections = props.sections;
    var _b = React.useState(null), componentProps = _b[0], setComponentProps = _b[1];
    var newProps = {};
    var playgroundSections = [];
    var booleanValueChanged = false;
    for (var _i = 0, sections_1 = sections; _i < sections_1.length; _i++) {
        var section = sections_1[_i];
        var sectionList = [];
        var _loop_1 = function (prop) {
            var propName = prop.propName;
            var propType = prop.propType;
            var isPropEnabled = true;
            if (componentProps && prop.dependsOnProps) {
                for (var _i = 0, _a = prop.dependsOnProps; _i < _a.length; _i++) {
                    var dependentProp = _a[_i];
                    isPropEnabled =
                        isPropEnabled &&
                            (dependentProp[0] === '~' ? !componentProps[dependentProp.substr(1)] : !!componentProps[dependentProp]);
                }
            }
            if (propType === 'boolean') {
                newProps[propName + 'Default'] = prop.defaultValue || false;
                var propDefaultValueChanged = componentProps &&
                    prop.defaultValue !== undefined &&
                    prop.defaultValue !== componentProps[propName + 'Default'];
                var propEnabledValueChanged = componentProps && componentProps[propName] !== (componentProps[propName] && isPropEnabled);
                newProps[propName] =
                    componentProps && componentProps[propName] !== 'undefined' && !propDefaultValueChanged
                        ? componentProps[propName] && isPropEnabled
                        : newProps[propName + 'Default'];
                if (propDefaultValueChanged || propEnabledValueChanged) {
                    (_a = prop.setDefaultValue) === null || _a === void 0 ? void 0 : _a.call(prop, newProps[propName]);
                    booleanValueChanged = true;
                }
                var onBooleanPropChange = function (ev, checked) {
                    var _a;
                    var newComponentProps = tslib_1.__assign({}, componentProps);
                    newComponentProps[propName] = checked || false;
                    setComponentProps(newComponentProps);
                    (_a = prop.setDefaultValue) === null || _a === void 0 ? void 0 : _a.call(prop, checked || false);
                };
                sectionList.push(React.createElement("tr", { key: section.sectionName + '_' + propName },
                    React.createElement("td", { style: cellStyle },
                        propName,
                        ":"),
                    React.createElement("td", { style: cellStyle },
                        React.createElement(react_1.Checkbox, { checked: componentProps && componentProps[propName] !== undefined && !propDefaultValueChanged
                                ? componentProps[propName]
                                : prop.defaultValue, disabled: !isPropEnabled, 
                            // eslint-disable-next-line react/jsx-no-bind
                            onChange: onBooleanPropChange }))));
            }
            else if (propType === 'string') {
                newProps[propName] = (componentProps && componentProps[propName]) || prop.defaultValue || '';
                var onStringPropChange = function (ev, newValue) {
                    var newComponentProps = tslib_1.__assign({}, componentProps);
                    newComponentProps[propName] = newValue || '';
                    setComponentProps(newComponentProps);
                };
                sectionList.push(React.createElement("tr", { key: section.sectionName + '_' + propName },
                    React.createElement("td", { style: cellStyle },
                        propName,
                        ":"),
                    React.createElement("td", { style: cellStyle },
                        React.createElement(react_1.TextField, { value: componentProps && componentProps[propName]
                                ? componentProps[propName]
                                : prop.defaultValue, disabled: !isPropEnabled, 
                            // eslint-disable-next-line react/jsx-no-bind
                            onChange: onStringPropChange }))));
            }
            else {
                var defaultSelectedKey = prop.defaultValue || propType[0];
                newProps[propName] = (componentProps && componentProps[propName]) || prop.defaultValue || propType[0];
                var onOptionsPropChange = function (ev, option, index) {
                    var newComponentProps = tslib_1.__assign({}, componentProps);
                    if (option) {
                        newComponentProps[propName] = option.key || '';
                        setComponentProps(newComponentProps);
                    }
                };
                sectionList.push(React.createElement("tr", { key: section.sectionName + '_' + propName },
                    React.createElement("td", { style: cellStyle },
                        propName,
                        ":"),
                    React.createElement("td", { style: cellStyle },
                        React.createElement(react_1.Dropdown, { disabled: !isPropEnabled, selectedKey: componentProps && componentProps[propName]
                                ? componentProps[propName]
                                : defaultSelectedKey, options: propType.map(function (value) { return ({ key: value, text: value }); }), 
                            // eslint-disable-next-line react/jsx-no-bind
                            onChange: onOptionsPropChange }))));
            }
        };
        for (var _c = 0, _d = section.propList; _c < _d.length; _c++) {
            var prop = _d[_c];
            _loop_1(prop);
        }
        playgroundSections.push(React.createElement(React.Fragment, { key: section.sectionName },
            React.createElement("tr", null,
                React.createElement("td", { style: cellStyle, colSpan: 2 },
                    React.createElement(react_text_1.Text, { variant: "title3" }, section.sectionName))),
            sectionList));
    }
    if (componentProps === null || booleanValueChanged) {
        setComponentProps(newProps);
    }
    var elementProps = tslib_1.__assign(tslib_1.__assign({}, componentProps), { children: componentProps && !componentProps.iconOnly && !componentProps.children && componentProps.content, icon: componentProps && componentProps.icon ? 'x' : undefined });
    return (React.createElement(React.Fragment, null,
        React.createElement(react_1.Stack, { horizontalAlign: "center" }, React.cloneElement(children, elementProps || {})),
        React.createElement("table", { style: tableStyle, cellSpacing: 0 },
            React.createElement("tbody", null, playgroundSections))));
};
exports.Playground = Playground;
//# sourceMappingURL=Playground.js.map