// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var widget_1 = require('./widget');
var _ = require('underscore');
/**
 * css properties exposed by the layout widget with their default values.
 */
var css_properties = {
    align_content: '',
    align_items: '',
    align_self: '',
    border: '',
    bottom: '',
    display: '',
    flex: '',
    flex_flow: '',
    height: '',
    justify_content: '',
    left: '',
    margin: '',
    max_height: '',
    max_width: '',
    min_height: '',
    min_width: '',
    overflow: '',
    order: '',
    padding: '',
    right: '',
    top: '',
    visibility: '',
    width: ''
};
/**
 * Represents a group of CSS style attributes
 */
var LayoutModel = (function (_super) {
    __extends(LayoutModel, _super);
    function LayoutModel() {
        _super.apply(this, arguments);
    }
    LayoutModel.prototype.defaults = function () {
        return _.extend(_super.prototype.defaults.call(this), {
            _model_name: 'LayoutModel',
            _view_name: 'LayoutView'
        }, css_properties);
    };
    return LayoutModel;
}(widget_1.DOMWidgetModel));
exports.LayoutModel = LayoutModel;
var LayoutView = (function (_super) {
    __extends(LayoutView, _super);
    function LayoutView() {
        _super.apply(this, arguments);
    }
    /**
     * Public constructor
     */
    LayoutView.prototype.initialize = function (parameters) {
        this._traitNames = [];
        _super.prototype.initialize.call(this, parameters);
        // Register the traits that live on the Python side
        for (var _i = 0, _a = Object.keys(css_properties); _i < _a.length; _i++) {
            var key = _a[_i];
            this.registerTrait(key);
        }
    };
    /**
     * Register a CSS trait that is known by the model
     * @param trait
     */
    LayoutView.prototype.registerTrait = function (trait) {
        var _this = this;
        this._traitNames.push(trait);
        // Listen to changes, and set the value on change.
        this.listenTo(this.model, 'change:' + trait, function (model, value) {
            _this.handleChange(trait, value);
        });
        // Set the initial value on display.
        this.displayed.then(function () {
            _this.handleChange(trait, _this.model.get(trait));
        });
    };
    /**
     * Get the the name of the css property from the trait name
     * @param  model attribute name
     * @return css property name
     */
    LayoutView.prototype.css_name = function (trait) {
        return trait.replace('_', '-');
    };
    /**
     * Handles when a trait value changes
     */
    LayoutView.prototype.handleChange = function (trait, value) {
        var _this = this;
        this.displayed.then(function (parent) {
            if (parent) {
                parent.el.style[_this.css_name(trait)] = value;
            }
            else {
                console.warn('Style not applied because a parent view doesn\'t exist');
            }
        });
    };
    /**
     * Remove the styling from the parent view.
     */
    LayoutView.prototype.unlayout = function () {
        var _this = this;
        this._traitNames.forEach(function (trait) {
            _this.displayed.then(function (parent) {
                if (parent) {
                    parent.el.style[_this.css_name(trait)] = '';
                }
                else {
                    console.warn('Style not removed because a parent view doesn\'t exist');
                }
            });
        }, this);
    };
    return LayoutView;
}(widget_1.DOMWidgetView));
exports.LayoutView = LayoutView;
