import { isDef } from '../utils/commonUtil';
import { PopupMixin } from '../mixins/popup';
import Icon from '../icon';
import './index.less';

var Index = {
    mixins: [PopupMixin],

    props: {
        icon: String,
        className: null,
        loadingType: String,
        forbidClick: Boolean,
        closeOnClick: Boolean,
        message: [Number, String],
        position: {
            type: String,
            'default': 'middle',
            validator: function validator(value) {
                return ['middle', 'top', 'bottom'].indexOf(value) > -1;
            }
        },
        transition: {
            type: String,
            'default': 'sn-fade'
        },
        adjustKeyboard: {
            type: Boolean,
            'default': false
        }
    },

    data: function data() {
        return {
            clickable: false,
            multiLine: false
        };
    },
    mounted: function mounted() {
        this.toggleClickable();
    },
    destroyed: function destroyed() {
        this.toggleClickable();
    },


    watch: {
        value: 'toggleClickable',
        forbidClick: 'toggleClickable',
        message: function message() {
            var _this = this;

            this.$nextTick(function () {
                var $toast = _this.$refs.toast;
                if ($toast && $toast instanceof HTMLElement) {
                    var height = $toast.getBoundingClientRect().height;
                    _this.multiLine = height > 40;
                }
            });
        }
    },

    methods: {
        onClick: function onClick() {
            if (this.closeOnClick) {
                this.close();
            }
        },
        toggleClickable: function toggleClickable() {
            var clickable = this.value && this.forbidClick;

            if (this.clickable !== clickable) {
                this.clickable = clickable;
                var action = clickable ? 'add' : 'remove';
                document.body.classList[action]('sn-toast-unclickable');
            }
        },


        /* istanbul ignore next */
        onAfterEnter: function onAfterEnter() {
            this.$emit('opened');

            if (this.onOpened) {
                this.onOpened();
            }
        },
        onAfterLeave: function onAfterLeave() {
            this.$emit('closed');
        },
        genIcon: function genIcon() {
            var h = this.$createElement;
            var icon = this.icon;


            if (icon) {
                return h(Icon, { 'class': 'sn-toast-inner-icon', attrs: { type: icon }
                });
            }
        },
        genMessage: function genMessage() {
            var h = this.$createElement;
            var message = this.message;


            if (!isDef(message) || message === '') {
                return;
            }

            return h(
                'div',
                { 'class': 'sn-toast-inner-text' },
                [message]
            );
        }
    },

    render: function render() {
        var h = arguments[0];
        var position = this.position,
            icon = this.icon,
            className = this.className,
            multiLine = this.multiLine;

        var classNames = {
            'sn-toast': true,
            'sn-toast-text': true,
            'sn-toast-icon': icon !== ''
        };
        classNames['sn-toast-' + position] = position;
        classNames['sn-toast-multiline'] = multiLine;
        className && (classNames[className] = true);

        return h(
            'transition',
            {
                attrs: {
                    name: this.transition
                },
                on: {
                    'afterEnter': this.onAfterEnter,
                    'afterLeave': this.onAfterLeave
                }
            },
            [h(
                'div',
                {
                    ref: 'toast',
                    directives: [{
                        name: 'show',
                        value: this.value
                    }],

                    'class': classNames,
                    on: {
                        'click': this.onClick
                    }
                },
                [this.genIcon(), this.genMessage()]
            )]
        );
    }
};

export default Index;