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

Vue.component('previewer', {
    delimiters: ['<<', '>>'],
    props: {
        url: {default: null},
        builder: {default: null},
    },
    data: function () {
        return {
            iframeUrl: {default: null},

            viewport: 'desktop',
            viewports: ['desktop', 'tablet', 'mobile',],
            viewportsLabels: ['Classique', 'Tablette', 'Mobile',],

            toolbarBrickBounds: null,
            toolbarBrick: null,
            triggerDelayMouseoutTimeout: null,
        };
    },
    methods: {
        changeViewport: function (targetSize) {
            if (this.viewports.indexOf(targetSize) === -1) {
                console.warn('Unknown viewport size: "' + targetSize + '"');
                return;
            }
            this.viewport = targetSize;
            EventBus.emitEvent(EventTypes.PREVIEWER_VIEWPORT_CHANGE, this);
        },
    },
    template: `
      <div
          class="brick-previewer"
          :class="{
          }"
      >
        <div class="layout-switcher btn-group m-auto d-flex">
          <button
              v-for="(vp, index) in viewports"
              class="btn btn-sm"
              :class="{
                  active: viewport === vp
              }"
              @click="changeViewport(vp)"
              v-html="viewportsLabels[index]"
              :html="JSON.stringify(vp)"
          ></button>
        </div>
        <previewer-iframe 
            :previewer="this" 
            :builder="builder" 
            :url="url" 
            :viewport="viewport"
        ></previewer-iframe>
      </div>
    `,
});