import ListItem from '../list-item';
import Icon from '../icon';
import Popup from '../popup';
import { PortalMixin } from '../mixins/portal';
import { ChildrenMixin } from '../mixins/relation';

var DropdownMenuItem = {
    name: 'SnDropdownMenuItem',

    mixins: [PortalMixin({ ref: 'wrapper' }), ChildrenMixin('dropdownMenu')],

    props: {
        value: null,
        title: String,
        disabled: Boolean,
        titleClass: String,
        options: {
            type: Array,
            'default': function _default() {
                return [];
            }
        }
    },

    data: function data() {
        return {
            transition: true,
            showPopup: false,
            showWrapper: false
        };
    },


    computed: {
        displayTitle: function displayTitle() {
            var _this = this;

            if (this.title) {
                return this.title;
            }

            var match = this.options.filter(function (option) {
                return option.value === _this.value;
            });
            return match.length ? match[0].text : '';
        }
    },

    beforeCreate: function beforeCreate() {
        var _this2 = this;

        var createEmitter = function createEmitter(eventName) {
            return function () {
                return _this2.$emit(eventName);
            };
        };

        this.onOpen = createEmitter('open');
        this.onClose = createEmitter('close');
        this.onOpened = createEmitter('opened');
    },


    methods: {
        onInput: function onInput(val) {
            this.showPopup = val;
        },
        toggle: function toggle() {
            var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.showPopup;
            var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

            if (show === this.showPopup) {
                return;
            }

            this.transition = !options.immediate;
            this.showPopup = show;

            if (show) {
                this.parent.updateOffset();
                this.showWrapper = true;
            }
        }
    },

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

        var h = arguments[0];
        var showPopup = this.showPopup,
            $slots = this.$slots;
        var _parent = this.parent,
            zIndex = _parent.zIndex,
            offset = _parent.offset,
            overlay = _parent.overlay,
            duration = _parent.duration,
            direction = _parent.direction,
            activeColor = _parent.activeColor,
            closeOnClickOverlay = _parent.closeOnClickOverlay;


        var Options = this.options.map(function (option) {
            var active = option.value === _this3.value;
            return h(
                ListItem,
                {
                    attrs: {
                        clickable: true,

                        icon: option.icon,
                        title: option.text
                    },
                    key: option.value, 'class': {
                        'sn-dropdown-item-option': true,
                        'sn-dropdown-item-option-active': active
                    },
                    style: { color: active ? activeColor : '' },
                    on: {
                        'click': function click() {
                            _this3.showPopup = false;

                            if (option.value !== _this3.value) {
                                _this3.$emit('input', option.value);
                                _this3.$emit('change', option.value);
                            }
                        }
                    }
                },
                [active && h(Icon, {
                    slot: 'right-icon',
                    'class': 'sn-dropdown-item-icon',
                    attrs: { type: 'check'
                    }
                })]
            );
        });

        var style = { zIndex: zIndex };
        if (direction === 'down') {
            style.top = offset + 'px';
        } else {
            style.bottom = offset + 'px';
        }

        return h(
            'div',
            {
                directives: [{
                    name: 'show',
                    value: this.showWrapper
                }],

                ref: 'wrapper',
                style: style,
                'class': ['sn-dropdown-item', 'sn-dropdown-item-' + direction]
            },
            [h(
                Popup,
                {
                    attrs: {
                        value: showPopup,

                        overlay: overlay,

                        position: direction === 'down' ? 'top' : 'bottom',
                        duration: this.transition ? duration : 0,
                        closeOnClickOverlay: closeOnClickOverlay,
                        overlayStyle: { position: 'absolute' }
                    },
                    on: {
                        'input': this.onInput,
                        'open': this.onOpen,
                        'close': this.onClose,
                        'opened': this.onOpened,
                        'closed': function closed() {
                            _this3.showWrapper = false;
                            _this3.$emit('closed');
                        }
                    },
                    'class': 'sn-dropdown-item-content' },
                [Options, $slots['default']]
            )]
        );
    }
};

export default DropdownMenuItem;