/**
 * DevExtreme (ui/drop_down_button.js)
 * Version: 19.1.0 (build 19071)
 * Build date: Tue Mar 12 2019
 *
 * Copyright (c) 2012 - 2019 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
var _renderer = require("../core/renderer");
var _renderer2 = _interopRequireDefault(_renderer);
var _ui = require("./widget/ui.widget");
var _ui2 = _interopRequireDefault(_ui);
var _component_registrator = require("../core/component_registrator");
var _component_registrator2 = _interopRequireDefault(_component_registrator);
var _button_group = require("./button_group");
var _button_group2 = _interopRequireDefault(_button_group);
var _popup = require("./popup");
var _popup2 = _interopRequireDefault(_popup);
var _list = require("./list");
var _list2 = _interopRequireDefault(_list);
var _ui3 = require("./editor/ui.data_expression");
var _ui4 = _interopRequireDefault(_ui3);
var _extend = require("../core/utils/extend");
var _deferred = require("../core/utils/deferred");
var _type = require("../core/utils/type");
var _common = require("../core/utils/common");
var _message = require("../localization/message");

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        "default": obj
    }
}
var DROP_DOWN_BUTTON_CLASS = "dx-dropdownbutton";
var DROP_DOWN_BUTTON_CONTENT = "dx-dropdownbutton-content";
var DROP_DOWN_BUTTON_ACTION_CLASS = "dx-dropdownbutton-action";
var DROP_DOWN_BUTTON_TOGGLE_CLASS = "dx-dropdownbutton-toggle";
var DropDownButton = _ui2.default.inherit({
    _getDefaultOptions: function() {
        return (0, _extend.extend)(this.callBase(), _ui4.default._dataExpressionDefaultOptions(), {
            deferRendering: true,
            showEvent: "click",
            showSelectedItem: true,
            grouped: false,
            noDataText: (0, _message.format)("dxCollectionWidget-noDataText"),
            itemTemplate: "item",
            groupTemplate: "group",
            displayExpr: void 0,
            valueExpr: "this"
        })
    },
    _init: function() {
        this.callBase();
        this._initDataExpressions();
        this._createItemClickAction()
    },
    _initMarkup: function() {
        this.$element().addClass(DROP_DOWN_BUTTON_CLASS);
        this._renderButtonGroup();
        if (!this.option("deferRendering")) {
            this._renderPopup()
        }
        this._renderValue()
    },
    _createItemClickAction: function() {
        this._itemClickAction = this._createActionByOption("onItemClick")
    },
    _fireItemClickAction: function(_ref) {
        var event = _ref.event,
            itemElement = _ref.itemElement,
            itemData = _ref.itemData;
        return this._itemClickAction({
            event: event,
            itemElement: itemElement,
            itemData: this._actionItem || itemData
        })
    },
    _buttonGroupOptions: function() {
        return (0, _extend.extend)(true, {
            items: [{
                icon: "default",
                onClick: this._fireItemClickAction.bind(this),
                elementAttr: {
                    "class": DROP_DOWN_BUTTON_ACTION_CLASS
                }
            }, {
                icon: "spindown",
                width: 24,
                elementAttr: {
                    "class": DROP_DOWN_BUTTON_TOGGLE_CLASS
                },
                onClick: this.toggle.bind(this)
            }],
            stylingMode: "outlined",
            selectionMode: "none"
        }, this.option("buttonGroupOptions"))
    },
    _popupOptions: function() {
        var _this = this;
        return (0, _extend.extend)({
            deferRendering: this.option("deferRendering"),
            minWidth: 130,
            closeOnOutsideClick: true,
            showTitle: false,
            animation: {
                show: {
                    type: "fade",
                    duration: 0,
                    from: 0,
                    to: 1
                },
                hide: {
                    type: "fade",
                    duration: 400,
                    from: 1,
                    to: 0
                }
            },
            width: "auto",
            height: "auto",
            shading: false,
            position: {
                of: this._buttonGroup.element(),
                collision: "flipfit",
                my: "top right",
                at: "bottom right",
                offset: {
                    y: -1
                }
            },
            arrowPosition: "end",
            contentTemplate: function(content) {
                var $content = (0, _renderer2.default)(content);
                $content.addClass(DROP_DOWN_BUTTON_CONTENT);
                _this._list = _this._createComponent((0, _renderer2.default)("<div>"), _list2.default, _this._listOptions());
                $content.append(_this._list.$element())
            }
        }, this.option("dropDownOptions"))
    },
    _listOptions: function() {
        var _this2 = this;
        return {
            selectionMode: "single",
            selectedItemKeys: [this.option("value")],
            grouped: this.option("grouped"),
            keyExpr: this._getCollectionKeyExpr(),
            noDataText: this.option("noDataText"),
            displayExpr: this.option("displayExpr"),
            itemTemplate: this.option("itemTemplate"),
            tabIndex: null,
            dataSource: this._dataSource,
            onItemClick: function(e) {
                _this2.option("value", _this2._valueGetter(e.itemData));
                var actionResult = _this2._fireItemClickAction(e);
                if (false !== actionResult) {
                    _this2.toggle(false)
                }
            }
        }
    },
    _renderPopup: function() {
        this._popup = this._createComponent((0, _renderer2.default)("<div>"), _popup2.default, this._popupOptions());
        this.$element().append(this._popup.$element())
    },
    _renderButtonGroup: function() {
        var $buttonGroup = this._buttonGroup && this._buttonGroup.$element() || (0, _renderer2.default)("<div>");
        if (!this._buttonGroup) {
            this.$element().append($buttonGroup)
        }
        this._buttonGroup = this._createComponent($buttonGroup, _button_group2.default, this._buttonGroupOptions())
    },
    _renderValue: function() {
        var _this3 = this;
        var value = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : this.option("value");
        this._loadItemByKey(value).done(function(itemData) {
            _this3._actionItem = itemData;
            if (_this3.option("showSelectedItem")) {
                _this3._setActionButton(itemData)
            }
        }).fail(function() {
            _this3._actionItem = value;
            if (_this3.option("showSelectedItem")) {
                _this3._setActionButton(value)
            }
        })
    },
    _loadItemByKey: function(key) {
        if ((0, _type.isPlainObject)(key)) {
            return (new _deferred.Deferred).resolve(key).promise()
        }
        if (this._list) {
            this._setListOption("selectedItemKeys", [key]);
            return (new _deferred.Deferred).resolve(this._list.option("selectedItem")).promise()
        } else {
            return this._loadValue(key)
        }
    },
    _setActionButton: function(itemData) {
        var displayedValue = String((0, _common.ensureDefined)(this._displayGetter(itemData), ""));
        this._buttonGroup.option("items[0].text", displayedValue);
        this._buttonGroup.option("items[0].icon", itemData && itemData.icon)
    },
    toggle: function(visible) {
        this._popup || this._renderPopup();
        this._popup.toggle(visible)
    },
    _setListOption: function(name, value) {
        this._list && this._list.option(name, value)
    },
    _setCollectionWidgetOption: function() {
        this._setListOption.apply(this, arguments)
    },
    _clean: function() {
        this._list && this._list.$element().remove();
        this._popup && this._popup.$element().remove()
    },
    _optionChanged: function(args) {
        var name = args.name,
            value = args.value;
        this._dataExpressionOptionChanged(args);
        switch (args.name) {
            case "items":
            case "dataSource":
            case "valueExpr":
            case "displayExpr":
            case "itemTemplate":
            case "showEvent":
            case "showSelectedItem":
                break;
            case "grouped":
            case "noDataText":
            case "groupTemplate":
                this._setListOption(name, value);
                break;
            case "onItemClick":
                this._createItemClickAction();
                break;
            case "deferRendering":
                if (!value && !this._popup) {
                    this._renderPopup()
                }
                break;
            case "value":
                this._renderValue(value);
                break;
            default:
                this.callBase(args)
        }
    }
}).include(_ui4.default);
(0, _component_registrator2.default)("dxDropDownButton", DropDownButton);
module.exports = DropDownButton;
module.exports.default = module.exports;
