import Vue from 'vue/dist/vue'
import EventBus from "../util/EventBus";
import EventTypes from "../util/EventTypes";

Vue.component('previewer-toolbar', {
    props: {
        brickBounds: {},
        focusedBrick: {},
        triggerDelayMouseoutTimeout: {},
    },
    data() {
        return {};
    },
    methods: {
        changeViewport: function (targetSize) {
            if (this.viewports.indexOf(targetSize) === -1) {
                console.warn('Unknown viewport size: "' + targetSize + '"');
                return;
            }
            this.currentViewport = targetSize;
        },
    },
    computed: {
        styles() {
            var styles = {};
            styles['position'] = 'fixed';
            styles['top'] = this.brickBounds.top - 34 + 8 /* force overlap for mouseover */ + 'px';
            styles['left'] = this.brickBounds.left + 5 + 'px';
            styles['width'] = 'auto';
            styles['height'] = 'auto';
            return styles;
        }
    },
    template: `
      <div v-if="brickBounds !== null && focusedBrick !== null && triggerDelayMouseoutTimeout !== null"
           class="preview-toolbar"
           :style="styles"
           @mouseover="triggerDelayMouseoutTimeout"
      >
        <div class="btn-group">
          <brick-visualize-in-tree
              :brick="focusedBrick"
          />
          <brick-btn-update
              v-if="focusedBrick.hasForm === true"
              :brick="focusedBrick"
          />
        </div>
      </div>
    `,
});