"use strict";
var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
// tslint:disable:jsx-no-multiline-js
// tslint:disable:max-line-length
var _ = require("lodash");
var React = require("react");
var core_1 = require("@jsonforms/core");
var react_1 = require("@jsonforms/react");
var react_redux_1 = require("react-redux");
var ObjectListItem_1 = require("./ObjectListItem");
var ExpandRootArray_1 = require("./ExpandRootArray");
var AddItemDialog_1 = require("./AddItemDialog");
var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
// import TouchBackend from 'react-dnd-touch-backend';
var react_dnd_1 = require("react-dnd");
var reducers_1 = require("../reducers");
var styles_1 = require("@material-ui/core/styles");
var recompose_1 = require("recompose");
var Master = function (_a) {
    var schema = _a.schema, path = _a.path, selection = _a.selection, handlers = _a.handlers, uischema = _a.uischema, rootData = _a.rootData, filterPredicate = _a.filterPredicate, labelProvider = _a.labelProvider, imageProvider = _a.imageProvider;
    if (schema.items !== undefined) {
        return (React.createElement("ul", null,
            React.createElement(ExpandRootArray_1.default, { rootData: rootData, schema: schema.items, path: path, selection: selection, handlers: handlers, uischema: uischema, filterPredicate: filterPredicate, labelProvider: labelProvider, imageProvider: imageProvider })));
    }
    return (React.createElement("ul", null,
        React.createElement(ObjectListItem_1.default, { path: path, schema: schema, uischema: uischema, selection: selection, handlers: handlers, isRoot: true, filterPredicate: filterPredicate, labelProvider: labelProvider, imageProvider: imageProvider })));
};
var isNotTuple = function (schema) { return !Array.isArray(schema.items); };
var styles = function () { return ({
    treeMasterDetailContent: {},
    treeMasterDetail: {
        display: 'flex',
        flexDirection: 'column',
        '& $treeMasterDetailContent': {
            display: 'flex',
            flexDirection: 'row'
        }
    },
    treeMasterDetailMaster: {
        flex: 1,
        padding: '0.5em',
        borderStyle: 'solid',
        borderWidth: 'thin',
        borderColor: 'lightgrey',
        borderRadius: '0.2em',
        '& ul': {
            listStyleType: 'none',
            margin: 0,
            padding: 0,
            position: 'relative',
            overflow: 'hidden',
            '&:after': {
                content: '""',
                position: 'absolute',
                left: '0.2em',
                borderLeft: '1px solid lightgrey',
                height: '0.6em',
                bottom: '0'
            },
            '&:last-child::after': {
                display: 'none'
            }
        }
    },
    treeMasterDetailDetail: {
        flex: 3,
        padding: '0.5em',
        borderStyle: 'solid',
        borderWidth: 'thin',
        borderColor: 'lightgrey',
        borderRadius: '0.2em',
        '&:first-child': {
            marginRight: '0.25em'
        }
    }
}); };
var TreeMasterDetail = /** @class */ (function (_super) {
    __extends(TreeMasterDetail, _super);
    function TreeMasterDetail() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.setSelection = function (schema, data, path) { return function () {
            _this.setState({
                selected: {
                    schema: schema,
                    data: data,
                    path: path
                }
            });
        }; };
        _this.openDialog = function (schema, path) { return function () {
            _this.setState({
                dialog: {
                    open: true,
                    schema: schema,
                    path: path
                }
            });
        }; };
        _this.closeDialog = function () {
            _this.setState({
                dialog: {
                    open: false,
                    schema: undefined,
                    path: undefined
                }
            });
        };
        return _this;
    }
    TreeMasterDetail.prototype.componentWillMount = function () {
        var _a = this.props, uischema = _a.uischema, resolvedRootData = _a.resolvedRootData, resolvedSchema = _a.resolvedSchema;
        var controlElement = uischema;
        this.setState({
            dialog: {
                open: false,
                schema: undefined,
                path: undefined
            }
        });
        var path = core_1.Paths.fromScopable(controlElement);
        if (_.isArray(resolvedRootData)) {
            this.setState({
                selected: {
                    schema: resolvedSchema.items,
                    data: resolvedRootData[0],
                    path: core_1.Paths.compose(path, '0')
                }
            });
        }
        else {
            this.setState({
                selected: {
                    schema: resolvedSchema,
                    data: resolvedRootData,
                    path: path
                }
            });
        }
    };
    TreeMasterDetail.prototype.render = function () {
        var _a = this.props, uischema = _a.uischema, schema = _a.schema, resolvedSchema = _a.resolvedSchema, visible = _a.visible, path = _a.path, resolvedRootData = _a.resolvedRootData, rootData = _a.rootData, addToRoot = _a.addToRoot, uiSchemata = _a.uiSchemata, filterPredicate = _a.filterPredicate, labelProvider = _a.labelProvider, imageProvider = _a.imageProvider, classes = _a.classes;
        var controlElement = uischema;
        var dialogProps = {
            open: this.state.dialog.open
        };
        var resetSelection;
        if (resolvedSchema.items !== undefined) {
            resetSelection = this.setSelection(resolvedSchema.items, resolvedRootData[0], core_1.Paths.compose(path, '0'));
        }
        else {
            resetSelection = this.setSelection(resolvedSchema, resolvedRootData, path);
        }
        var handlers = {
            onSelect: this.setSelection,
            onAdd: this.openDialog,
            resetSelection: resetSelection
        };
        var detailSchema;
        if (this.state.selected && this.state.selected.schema && this.state.selected.schema.$id) {
            var uiSchema = uiSchemata[this.state.selected.schema.$id];
            detailSchema = uiSchema ? uiSchema : core_1.generateDefaultUISchema(this.state.selected.schema);
        }
        return (React.createElement("div", { hidden: !visible, className: classes.treeMasterDetail },
            React.createElement("div", null,
                React.createElement("label", null, typeof controlElement.label === 'string' ? controlElement.label : ''),
                Array.isArray(resolvedRootData) &&
                    React.createElement("button", { onClick: addToRoot(schema, path) }, "Add to root")),
            React.createElement("div", { className: classes.treeMasterDetailContent },
                React.createElement("div", { className: classes.treeMasterDetailMaster },
                    React.createElement(Master, { uischema: uischema, schema: resolvedSchema, path: path, handlers: handlers, selection: this.state.selected.data, rootData: rootData, filterPredicate: filterPredicate, labelProvider: labelProvider, imageProvider: imageProvider })),
                React.createElement("div", { className: classes.treeMasterDetailDetail }, this.state.selected ?
                    React.createElement(react_1.JsonForms, { schema: this.state.selected.schema, path: this.state.selected.path, uischema: detailSchema }) : 'Select an item')),
            React.createElement("div", null, this.state.dialog.open &&
                React.createElement(AddItemDialog_1.default, { path: this.state.dialog.path, schema: this.state.dialog.schema, closeDialog: this.closeDialog, dialogProps: dialogProps, setSelection: this.setSelection }))));
    };
    return TreeMasterDetail;
}(react_1.Control));
exports.TreeMasterDetail = TreeMasterDetail;
var mapStateToProps = function (state, ownProps) {
    var path = core_1.Paths.compose(ownProps.path, core_1.Paths.fromScopable(ownProps.uischema));
    var visible = _.has(ownProps, 'visible') ? ownProps.visible : core_1.Runtime.isVisible(ownProps, state);
    var enabled = _.has(ownProps, 'enabled') ? ownProps.enabled : core_1.Runtime.isEnabled(ownProps, state);
    var rootData = core_1.getData(state);
    var uiSchemata = reducers_1.getUiSchemata(state);
    return {
        rootData: core_1.getData(state),
        resolvedRootData: core_1.Resolve.data(rootData, path),
        uischema: ownProps.uischema,
        schema: ownProps.schema,
        resolvedSchema: core_1.Resolve.schema(ownProps.schema, ownProps.uischema.scope),
        path: path,
        visible: visible,
        enabled: enabled,
        uiSchemata: uiSchemata,
        filterPredicate: ownProps.filterPredicate,
        labelProvider: ownProps.labelProvider,
        imageProvider: ownProps.imageProvider
    };
};
var mapDispatchToProps = function (dispatch) { return ({
    addToRoot: function (schema, path) {
        return function () {
            if (isNotTuple(schema)) {
                dispatch(core_1.Actions.update(path, function (data) {
                    var clone = data.slice();
                    clone.push({});
                    return clone;
                }));
            }
        };
    }
}); };
var DnDTreeMasterDetail = recompose_1.compose(styles_1.withStyles(styles, { name: 'TreeMasterDetail' }), react_dnd_1.DragDropContext(react_dnd_html5_backend_1.default))(TreeMasterDetail);
exports.TreeWithDetailRenderer = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(DnDTreeMasterDetail);
exports.default = exports.TreeWithDetailRenderer;
//# sourceMappingURL=TreeWithDetailRenderer.js.map