'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

var _relation = require('../mixins/relation');

var _clickOutside = require('../mixins/click-outside');

var _classnames = require('../_utils/classnames');

var _classnames2 = _interopRequireDefault(_classnames);

require('./index.less');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var DropdownMenu = {
    name: 'SnDropdownMenu',

    mixins: [(0, _relation.ParentMixin)('dropdownMenu'), (0, _clickOutside.ClickOutsideMixin)({
        event: 'click',
        method: 'onClickOutside'
    })],

    props: {
        activeColor: String,
        overlay: {
            type: Boolean,
            'default': true
        },
        zIndex: [Number, String],
        duration: {
            type: Number,
            'default': 300
        },
        direction: {
            type: String,
            'default': 'down',
            validator: function validator(value) {
                return ['down', 'up'].indexOf(value) > -1;
            }
        },
        closeOnClickOverlay: {
            type: Boolean,
            'default': true
        }
    },

    data: function data() {
        return {
            offset: 0
        };
    },


    methods: {
        updateOffset: function updateOffset() {
            var menu = this.$refs.menu;

            var rect = menu.getBoundingClientRect();

            if (this.direction === 'down') {
                this.offset = rect.bottom;
            } else {
                this.offset = window.innerHeight - rect.top;
            }
        },
        toggleItem: function toggleItem(active) {
            this.children.forEach(function (item, index) {
                if (index === active) {
                    item.toggle();
                } else if (item.showPopup) {
                    item.toggle(false, { immediate: true });
                }
            });
        },
        onClickOutside: function onClickOutside() {
            this.children.forEach(function (item) {
                item.toggle(false);
            });
        }
    },

    render: function render() {
        var _this = this;

        var h = arguments[0];
        var $slots = this.$slots;

        var active = this.children.some(function (item) {
            return item.showPopup;
        });
        var Titles = this.children.map(function (item, index) {
            var menuTitleProps = {
                'class': (0, _classnames2['default'])({
                    'sn-dropdown-menu-title': true,
                    'sn-dropdown-menu-title-active': item.showPopup,
                    'sn-dropdown-menu-title-down': item.showPopup === (_this.direction === 'down')
                }, item.titleClass),
                style: {
                    color: item.showPopup ? _this.activeColor : ''
                }
            };
            var renderMenuTitle = item.$slots['title'] ? h(
                'span',
                menuTitleProps,
                [item.$slots['title']]
            ) : h(
                'span',
                menuTitleProps,
                [h(
                    'div',
                    { 'class': 'sn-ellipsis' },
                    [item.displayTitle]
                ), h(_icon2['default'], {
                    attrs: { type: 'down' },
                    'class': 'sn-dropdown-menu-title-arrow' })]
            );
            return h(
                'div',
                {
                    attrs: {
                        role: 'button',
                        tabindex: item.disabled ? -1 : 0
                    },
                    'class': {
                        'sn-dropdown-menu-item': true,
                        'sn-dropdown-menu-item-active': item.showPopup,
                        'sn-dropdown-menu-disabled': item.disabled
                    },
                    on: {
                        'click': function click() {
                            if (!item.disabled) {
                                _this.toggleItem(index);
                            }
                        }
                    }
                },
                [renderMenuTitle]
            );
        });

        return h(
            'div',
            {
                ref: 'menu',
                'class': {
                    'sn-dropdown-menu': true,
                    'sn-dropdown-menu-active': active
                }
            },
            [Titles, $slots['default']]
        );
    }
};

exports['default'] = DropdownMenu;
module.exports = exports.default;