"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);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var get_1 = __importDefault(require("lodash/get"));
var isEqual_1 = __importDefault(require("lodash/isEqual"));
var core_1 = require("@angular/core");
var core_2 = require("@jsonforms/core");
var angular_1 = require("@jsonforms/angular");
var ionic_angular_1 = require("ionic-angular");
var store_1 = require("@angular-redux/store");
var master_1 = require("./pages/master/master");
var detail_1 = require("./pages/detail/detail");
var common_1 = require("../../common");
var isMasterPage = function (page) {
    return page !== undefined && page.component === master_1.MasterPage;
};
var ListWithDetailControl = /** @class */ (function (_super) {
    __extends(ListWithDetailControl, _super);
    function ListWithDetailControl(platform, ngRedux) {
        var _this = _super.call(this, ngRedux) || this;
        _this.platform = platform;
        _this.onSplitPaneChange = function (event) {
            _this._isSplit = event._visible;
            if (_this.masterNav && _this.detailNav) {
                _this._isSplit ? _this.showDetail() : _this.hideDetail();
            }
        };
        _this.showDetail = function () {
            var activeDetailView = _this.detailNav.getActive();
            return _this.detailNav.popToRoot({ animate: false }).then(function () {
                if (isMasterPage(activeDetailView)) {
                    // set empty detail
                    return _this.detailNav.setRoot(detail_1.DetailPage);
                }
                else if (activeDetailView !== undefined) {
                    // update detail, such that navbar in detail disappears
                    return _this.updateDetail(activeDetailView.data.item).then(function () {
                        return _this.updateMaster();
                    });
                }
            });
        };
        _this.hideDetail = function () {
            var activeDetailView = _this.detailNav.getActive();
            var activeMasterView = _this.masterNav.getActive();
            // set master as root on detail nav
            return _this.detailNav
                .setRoot(activeMasterView.component, activeMasterView.data, {
                animate: false
            })
                .then(function () {
                if (activeDetailView.data.item && activeDetailView.data.item.path) {
                    // update detail, such that navbar in detail appears
                    return _this.updateDetail(activeDetailView.data.item);
                }
            });
        };
        _this.updateMaster = function () {
            if (_this._isSplit) {
                _this.masterNav.setRoot(master_1.MasterPage, _this.masterParams, { animate: false });
            }
            else {
                _this.detailNav.setRoot(master_1.MasterPage, _this.masterParams, { animate: false });
            }
        };
        _this.updateDetail = function (item) {
            var params = {
                item: __assign({}, item, { isSplit: _this._isSplit, goBack: _this.goBack })
            };
            if (!_this._isSplit) {
                // push such that we have a back button
                return _this.detailNav.push(detail_1.DetailPage, params, { animate: false });
            }
            else {
                return _this.detailNav.setRoot(detail_1.DetailPage, params, { animate: false });
            }
        };
        _this.goBack = function () {
            if (!_this._isSplit) {
                _this.detailNav.pop();
            }
        };
        _this.masterPage = master_1.MasterPage;
        _this.detailPage = detail_1.DetailPage;
        return _this;
    }
    ListWithDetailControl.prototype.ngOnInit = function () {
        var _this = this;
        this.subscription = this.ngRedux
            .select()
            .subscribe(function (state) {
            var _a = _this.mapToProps(state), data = _a.data, createDefaultValue = _a.createDefaultValue, schema = _a.schema, uischema = _a.uischema;
            var controlElement = uischema;
            var instancePath = core_2.toDataPath(controlElement.scope + "/items");
            var resolvedSchema = core_2.resolveSchema(schema, controlElement.scope + "/items");
            var detailUISchema = controlElement.options.detail ||
                core_2.Generate.uiSchema(resolvedSchema, 'VerticalLayout');
            var masterItems = data.map(function (d, index) {
                var labelRefInstancePath = common_1.removeSchemaKeywords(controlElement.options.labelRef);
                var masterItem = {
                    label: get_1.default(d, labelRefInstancePath),
                    data: d,
                    path: instancePath + "." + index,
                    schema: resolvedSchema,
                    uischema: detailUISchema
                };
                return masterItem;
            });
            _this._isSplit = _this.platform.width() > 768;
            if (_this.masterItems === undefined ||
                _this.masterItems.length !== masterItems.length) {
                _this.masterItems = masterItems;
                _this.masterParams = {
                    items: _this.masterItems,
                    path: core_2.composeWithUi(_this.uischema, _this.path),
                    uischema: _this.uischema,
                    schema: _this.schema,
                    pushDetail: _this.updateDetail,
                    createDefaultValue: createDefaultValue
                };
                _this.updateMaster();
            }
            else if (_this.masterItems !== undefined) {
                var currentLabels = _this.masterItems.map(function (item) { return item.label; });
                var nextLabels_1 = masterItems.map(function (item) { return item.label; });
                if (!isEqual_1.default(currentLabels, nextLabels_1)) {
                    _this.masterParams.items.forEach(function (item, idx) {
                        if (item.label !== nextLabels_1[idx]) {
                            item.label = nextLabels_1[idx];
                        }
                    });
                }
            }
        });
        // show master page initially if not split
        this._isSplit = this.platform.width() > 768;
        if (!this._isSplit) {
            this.detailPage = master_1.MasterPage;
            this.detailParams = this.masterParams;
        }
    };
    ListWithDetailControl.prototype.mapToProps = function (state) {
        var props = core_2.mapStateToArrayControlProps(state, this.getOwnProps());
        var dispatch = core_2.mapDispatchToArrayControlProps(this.ngRedux.dispatch);
        return __assign({}, props, dispatch);
    };
    __decorate([
        core_1.ViewChild('masterNav'),
        __metadata("design:type", ionic_angular_1.Nav)
    ], ListWithDetailControl.prototype, "masterNav", void 0);
    __decorate([
        core_1.ViewChild('detailNav'),
        __metadata("design:type", ionic_angular_1.Nav)
    ], ListWithDetailControl.prototype, "detailNav", void 0);
    ListWithDetailControl = __decorate([
        core_1.Component({
            selector: 'jsonforms-master-detail',
            template: "\n    <ion-split-pane (ionChange)=\"onSplitPaneChange($event)\">\n      <ion-nav\n        [root]=\"masterPage\"\n        [rootParams]=\"masterParams\"\n        #masterNav\n      ></ion-nav>\n      <ion-nav\n        [root]=\"detailPage\"\n        [rootParams]=\"detailParams\"\n        #detailNav\n        main\n      ></ion-nav>\n    </ion-split-pane>\n  "
        }),
        __metadata("design:paramtypes", [ionic_angular_1.Platform, store_1.NgRedux])
    ], ListWithDetailControl);
    return ListWithDetailControl;
}(angular_1.JsonFormsControl));
exports.ListWithDetailControl = ListWithDetailControl;
exports.listWithDetailTester = core_2.rankWith(4, core_2.uiTypeIs('ListWithDetail'));
//# sourceMappingURL=list-with-detail-control.js.map