'use strict';

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

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _listItem = require('../list-item');

var _listItem2 = _interopRequireDefault(_listItem);

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

var _icon2 = _interopRequireDefault(_icon);

var _listItem3 = require('../mixins/list-item');

var _listItem4 = _interopRequireDefault(_listItem3);

var _raf = require('../_utils/dom/raf');

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

var CollapsePanel = {
    name: 'SnCollapsePanel',
    mixins: [_listItem4['default']],
    components: {
        Icon: _icon2['default']
    },
    data: function data() {
        return {
            show: null
        };
    },

    props: {
        name: [String, Number],
        clickable: {
            type: Boolean,
            'default': true
        },
        rightIcon: {
            type: String,
            'default': 'down'
        },
        collapseOnRightIcon: Boolean
    },
    computed: {
        expanded: function expanded() {
            var _this = this;

            if (!this.$parent) {
                return null;
            }
            var _$parent = this.$parent,
                _$parent$value = _$parent.value,
                value = _$parent$value === undefined ? [] : _$parent$value,
                accordion = _$parent.accordion;

            return accordion ? value === this.name : value.some(function (name) {
                return name === _this.name;
            });
        }
    },
    created: function created() {
        this.show = this.expanded;
    },

    methods: {
        collapse: function collapse() {
            var $parent = this.$parent;

            var name = $parent.accordion && this.name === $parent.value ? '' : this.name;
            this.$parent['switch'](name, !this.expanded);
        },
        handleItemClick: function handleItemClick() {
            if (!this.collapseOnRightIcon) {
                this.collapse();
            }
        },
        handleRightIconClick: function handleRightIconClick() {
            if (this.collapseOnRightIcon) {
                this.collapse();
            }
        },
        onTransitionEnd: function onTransitionEnd() {
            if (!this.expanded) {
                this.show = false;
            } else {
                this.$refs.wrapper.style.height = '';
            }
            this.$emit('transition-end');
        }
    },
    watch: {
        expanded: function expanded(newVal, oldVal) {
            var _this2 = this;

            if (oldVal === null) {
                return;
            }
            if (newVal) {
                this.show = true;
            }

            this.$nextTick(function () {
                var _$refs = _this2.$refs,
                    wrapper = _$refs.wrapper,
                    content = _$refs.content;

                if (!wrapper || !content) return;
                var offsetHeight = content.offsetHeight;


                if (offsetHeight) {
                    wrapper.style.height = newVal ? 0 : offsetHeight + 'px';

                    (0, _raf.doubleRaf)(function () {
                        wrapper.style.height = newVal ? offsetHeight + 'px' : 0;
                    });
                } else {
                    _this2.onTransitionEnd();
                }
            });
        }
    },
    render: function render() {
        var h = arguments[0];
        var show = this.show,
            expanded = this.expanded,
            $props = this.$props,
            $slots = this.$slots;
        var rightIcon = $props.rightIcon,
            restProps = (0, _objectWithoutProperties3['default'])($props, ['rightIcon']);


        var panelCls = {
            'sn-collapse-panel': true,
            'sn-collapse-panel-expanded': expanded
        };

        return h(
            'div',
            { 'class': panelCls },
            [h(
                _listItem2['default'],
                (0, _babelHelperVueJsxMergeProps2['default'])([{
                    attrs: {
                        role: 'button',
                        tabindex: 0,
                        'aria-expanded': String(expanded)
                    }
                }, { props: restProps }, {
                    attrs: {
                        border: expanded
                    },
                    'class': 'sn-collapse-panel-header',
                    on: {
                        'click': this.handleItemClick
                    }
                }]),
                [$slots.value ? h(
                    'div',
                    {
                        slot: 'default',
                        'class': 'sn-collapse-panel-header-content'
                    },
                    [$slots.value]
                ) : null, h(_icon2['default'], {
                    attrs: {
                        type: rightIcon
                    },
                    slot: 'right-icon',
                    'class': 'sn-collapse-panel-header-arrow',
                    on: {
                        'click': this.handleRightIconClick
                    }
                })]
            ), h(
                'div',
                {
                    directives: [{
                        name: 'show',
                        value: show
                    }],

                    ref: 'wrapper',
                    'class': 'sn-collapse-panel-body',
                    on: {
                        'transitionend': this.onTransitionEnd
                    }
                },
                [h(
                    'div',
                    { ref: 'content', 'class': 'sn-collapse-panel-content' },
                    [$slots['default']]
                )]
            )]
        );
    }
};

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