// 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 widget_button_1 = require('./widget_button');
var _ = require('underscore');
var BoolModel = (function (_super) {
    __extends(BoolModel, _super);
    function BoolModel() {
        _super.apply(this, arguments);
    }
    BoolModel.prototype.defaults = function () {
        return _.extend(_super.prototype.defaults.call(this), {
            value: false,
            description: '',
            disabled: false,
            _model_name: 'BoolModel'
        });
    };
    return BoolModel;
}(widget_1.DOMWidgetModel));
exports.BoolModel = BoolModel;
var CheckboxModel = (function (_super) {
    __extends(CheckboxModel, _super);
    function CheckboxModel() {
        _super.apply(this, arguments);
    }
    CheckboxModel.prototype.defaults = function () {
        return _.extend(_super.prototype.defaults.call(this), {
            _view_name: 'CheckboxView',
            _model_name: 'CheckboxModel'
        });
    };
    return CheckboxModel;
}(widget_1.DOMWidgetModel));
exports.CheckboxModel = CheckboxModel;
var CheckboxView = (function (_super) {
    __extends(CheckboxView, _super);
    function CheckboxView() {
        _super.apply(this, arguments);
    }
    /**
     * Called when view is rendered.
     */
    CheckboxView.prototype.render = function () {
        this.el.classList.add('jupyter-widgets');
        this.el.classList.add('widget-hbox');
        this.el.classList.add('widget-checkbox');
        this.checkbox = document.createElement('input');
        this.checkbox.setAttribute('type', 'checkbox');
        this.el.appendChild(this.checkbox);
        this.label = document.createElement('div');
        this.label.classList.add('widget-label');
        this.label.style.display = 'none';
        this.el.appendChild(this.label);
        this.update(); // Set defaults.
    };
    CheckboxView.prototype.events = function () {
        return {
            'click input[type="checkbox"]': '_handle_click'
        };
    };
    /**
     * Handles when the checkbox is clicked.
     *
     * Calling model.set will trigger all of the other views of the
     * model to update.
     */
    CheckboxView.prototype._handle_click = function () {
        var value = this.model.get('value');
        this.model.set('value', !value, { updated_view: this });
        this.touch();
    };
    /**
     * Update the contents of this view
     *
     * Called when the model is changed. The model may have been
     * changed by another view or by a state update from the back-end.
     */
    CheckboxView.prototype.update = function (options) {
        this.checkbox.checked = this.model.get('value');
        if (options === undefined || options.updated_view != this) {
            this.checkbox.disabled = this.model.get('disabled');
            var description = this.model.get('description');
            if (description.trim().length === 0) {
                this.label.style.display = 'none';
            }
            else {
                this.typeset(this.label, description);
                this.label.style.display = '';
            }
        }
        return _super.prototype.update.call(this);
    };
    return CheckboxView;
}(widget_1.DOMWidgetView));
exports.CheckboxView = CheckboxView;
var ToggleButtonModel = (function (_super) {
    __extends(ToggleButtonModel, _super);
    function ToggleButtonModel() {
        _super.apply(this, arguments);
    }
    ToggleButtonModel.prototype.defaults = function () {
        return _.extend(_super.prototype.defaults.call(this), {
            _view_name: 'ToggleButtonView',
            _model_name: 'ToggleButtonModel',
            tooltip: '',
            icon: '',
            button_style: ''
        });
    };
    return ToggleButtonModel;
}(BoolModel));
exports.ToggleButtonModel = ToggleButtonModel;
var ToggleButtonView = (function (_super) {
    __extends(ToggleButtonView, _super);
    function ToggleButtonView() {
        _super.apply(this, arguments);
    }
    ToggleButtonView.createPhosphorWidget = function () {
        return new widget_button_1.ButtonPWidget();
    };
    /**
     * Called when view is rendered.
     */
    ToggleButtonView.prototype.render = function () {
        this.el.className = 'jupyter-widgets widget-toggle-button';
        this.listenTo(this.model, 'change:button_style', this.update_button_style);
        this.update_button_style();
        this.update(); // Set defaults.
    };
    ToggleButtonView.prototype.update_button_style = function () {
        var class_map = {
            primary: ['mod-primary'],
            success: ['mod-success'],
            info: ['mod-info'],
            warning: ['mod-warning'],
            danger: ['mod-danger']
        };
        this.update_mapped_classes(class_map, 'button_style');
    };
    /**
     * Update the contents of this view
     *
     * Called when the model is changed. The model may have been
     * changed by another view or by a state update from the back-end.
     */
    ToggleButtonView.prototype.update = function (options) {
        if (this.model.get('value')) {
            this.el.classList.add('mod-active');
        }
        else {
            this.el.classList.remove('mod-active');
        }
        if (options === undefined || options.updated_view !== this) {
            this.el.disabled = this.model.get('disabled');
            this.el.setAttribute('title', this.model.get('tooltip'));
            var description = this.model.get('description');
            var icon = this.model.get('icon');
            if (description.trim().length === 0 && icon.trim().length === 0) {
                this.el.innerHTML = '&nbsp;'; // Preserve button height
            }
            else {
                this.el.textContent = '';
                if (icon.trim().length) {
                    var i = document.createElement('i');
                    this.el.appendChild(i);
                    i.classList.add('fa');
                    i.classList.add('fa-' + icon);
                }
                this.el.appendChild(document.createTextNode(description));
            }
        }
        return _super.prototype.update.call(this);
    };
    ToggleButtonView.prototype.events = function () {
        return {
            // Dictionary of events and their handlers.
            'click': '_handle_click'
        };
    };
    /**
     * Handles and validates user input.
     *
     * Calling model.set will trigger all of the other views of the
     * model to update.
     */
    ToggleButtonView.prototype._handle_click = function (event) {
        event.preventDefault();
        var value = this.model.get('value');
        this.model.set('value', !value, { updated_view: this });
        this.touch();
    };
    return ToggleButtonView;
}(widget_1.DOMWidgetView));
exports.ToggleButtonView = ToggleButtonView;
var ValidModel = (function (_super) {
    __extends(ValidModel, _super);
    function ValidModel() {
        _super.apply(this, arguments);
    }
    ValidModel.prototype.defaults = function () {
        return _.extend(_super.prototype.defaults.call(this), {
            readout: 'Invalid',
            _view_name: 'ValidView',
            _model_name: 'ValidModel'
        });
    };
    return ValidModel;
}(BoolModel));
exports.ValidModel = ValidModel;
var ValidView = (function (_super) {
    __extends(ValidView, _super);
    function ValidView() {
        _super.apply(this, arguments);
    }
    /**
     * Called when view is rendered.
     */
    ValidView.prototype.render = function () {
        this.el.classList.add('jupyter-widgets');
        this.el.classList.add('widget-valid');
        this.update();
    };
    /**
     * Update the contents of this view
     *
     * Called when the model is changed.  The model may have been
     * changed by another view or by a state update from the back-end.
     */
    ValidView.prototype.update = function () {
        this.el.textContent = '';
        this.el.classList.remove('mod-valid');
        this.el.classList.remove('mod-invalid');
        var icon = document.createElement('i');
        this.el.appendChild(icon);
        if (this.model.get('value')) {
            this.el.classList.add('mod-valid');
        }
        else {
            var readout = document.createTextNode(this.model.get('readout'));
            this.el.classList.add('mod-invalid');
            this.el.appendChild(readout);
        }
    };
    return ValidView;
}(widget_1.DOMWidgetView));
exports.ValidView = ValidView;
