import { __assign } from "tslib";
import * as React from 'react';
import { Checkbox, Dropdown, Stack, TextField } from '@fluentui/react';
import { Text } from '@fluentui/react-text';
var tableStyle = {
    border: '1px solid black',
};
var cellStyle = {
    border: '1px solid black',
    padding: '5px',
};
export 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 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[prop.propName + 'Default'] = prop.defaultValue || false;
                var propDefaultValueChanged = componentProps &&
                    prop.defaultValue !== undefined &&
                    prop.defaultValue !== componentProps[prop.propName + 'Default'];
                var propEnabledValueChanged = componentProps && componentProps[prop.propName] !== (componentProps[prop.propName] && isPropEnabled);
                newProps[prop.propName] =
                    componentProps && componentProps[prop.propName] !== 'undefined' && !propDefaultValueChanged
                        ? componentProps[prop.propName] && isPropEnabled
                        : newProps[prop.propName + 'Default'];
                if (propDefaultValueChanged || propEnabledValueChanged) {
                    (_a = prop.setDefaultValue) === null || _a === void 0 ? void 0 : _a.call(prop, newProps[prop.propName]);
                    booleanValueChanged = true;
                }
                var onBooleanPropChange = function (ev, checked) {
                    var _a;
                    var newComponentProps = __assign({}, componentProps);
                    newComponentProps[prop.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 + '_' + prop.propName },
                    React.createElement("td", { style: cellStyle },
                        prop.propName,
                        ":"),
                    React.createElement("td", { style: cellStyle },
                        React.createElement(Checkbox, { checked: componentProps && componentProps[prop.propName] !== undefined && !propDefaultValueChanged
                                ? componentProps[prop.propName]
                                : prop.defaultValue, disabled: !isPropEnabled, 
                            // eslint-disable-next-line react/jsx-no-bind
                            onChange: onBooleanPropChange }))));
            }
            else if (propType === 'string') {
                newProps[prop.propName] = prop.defaultValue || '';
                var onStringPropChange = function (ev, newValue) {
                    var newComponentProps = __assign({}, componentProps);
                    newComponentProps[prop.propName] = newValue || '';
                    setComponentProps(newComponentProps);
                };
                sectionList.push(React.createElement("tr", { key: section.sectionName + '_' + prop.propName },
                    React.createElement("td", { style: cellStyle },
                        prop.propName,
                        ":"),
                    React.createElement("td", { style: cellStyle },
                        React.createElement(TextField, { value: componentProps && componentProps[prop.propName]
                                ? componentProps[prop.propName]
                                : prop.defaultValue, disabled: !isPropEnabled, 
                            // eslint-disable-next-line react/jsx-no-bind
                            onChange: onStringPropChange }))));
            }
            else {
                var defaultSelectedKey = prop.defaultValue || propType[0];
                newProps[prop.propName] = prop.defaultValue || propType[0];
                var onOptionsPropChange = function (ev, option, index) {
                    var newComponentProps = __assign({}, componentProps);
                    if (option) {
                        newComponentProps[prop.propName] = option.key || '';
                        setComponentProps(newComponentProps);
                    }
                };
                sectionList.push(React.createElement("tr", { key: section.sectionName + '_' + prop.propName },
                    React.createElement("td", { style: cellStyle },
                        prop.propName,
                        ":"),
                    React.createElement("td", { style: cellStyle },
                        React.createElement(Dropdown, { disabled: !isPropEnabled, selectedKey: componentProps && componentProps[prop.propName]
                                ? componentProps[prop.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(Text, { variant: "title3" }, section.sectionName))),
            sectionList));
    }
    if (componentProps === null || booleanValueChanged) {
        setComponentProps(newProps);
    }
    var elementProps = __assign(__assign({}, componentProps), { children: componentProps && !componentProps.iconOnly && !componentProps.children && componentProps.content, icon: componentProps && componentProps.icon ? 'x' : undefined });
    return (React.createElement(React.Fragment, null,
        React.createElement(Stack, { horizontalAlign: "center" }, React.cloneElement(children, elementProps || {})),
        React.createElement("table", { style: tableStyle, cellSpacing: 0 },
            React.createElement("tbody", null, playgroundSections))));
};
//# sourceMappingURL=Playground.js.map