import Snap from 'snapsvg'
import Tooltip from '../Tooltip.vue'

var popoverOptions = {
    placement: 'auto',
    container: 'body',
    trigger: 'manual',
    html: true,
    title: '',
    viewport: '.cut-canvas',
    content: '',
}

export default {
    methods: {
        addTooltip: function() {

            var vm = new Vue(Tooltip);

            if (this.originalAnnotation) {
                vm.originalTitle = this.originalAnnotation.title;
                vm.originalDescription = this.originalAnnotation.description;
                vm.originalTags = this.originalAnnotation.tags;
            }

            vm.$mount(jQuery('<div>').get(0));

            vm.$on('close', () => {
                this.clear();
            });
            vm.$on('save', (data) => {
                this.save(data);
            });

            popoverOptions.content = vm.$el;

            var target = new Snap(this.getTooltipTarget());

            var $el = $(target.node);
            $el
                .popover(popoverOptions)
                .popover('show');

            this.$on('drag:start', function() {
                $el.popover('hide');
            });
            this.$on('drag:end', function() {
                $el.popover('show');
            });

            $el.on('shown.bs.popover', (e) => {
                var $tip = $el.data('bs.popover').$tip;
                $tip.find('input[name="title"]').focus();
            });
        },
        destroyTooltip: function() {
            var target = new Snap(this.getTooltipTarget());

            var $el = $(target.node);
            if ($el.data('bs.popover')) {
                $el.popover('destroy');
            }
        },
        hideTooltip: function() {
            var target = new Snap(this.getTooltipTarget());

            var $el = $(target.node);
            if ($el.data('bs.popover')) {
                $el.popover('hide');
            }
        },
        showTooltip: function() {
            var target = new Snap(this.getTooltipTarget());

            var $el = $(target.node);
            if ($el.data('bs.popover')) {
                $el.popover('show');
            }
        },
    }
}