import Snap from 'snapsvg'

import Tooltip from '../Tooltip.vue'

var popoverOptions = {

    placement: 'auto',

    container: 'body',

    trigger: 'manual',

    html: true,

    title: '',

    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');

            }

        },

    }

}