import Vue from 'vue/dist/vue'
import BuilderClient from "../api/BuilderClient";

Vue.component('brick-layout', {
    delimiters: ['<<', '>>'],
    props: [
        'builder',
        'selectLayout',
    ],
    data: function () {
        return {
            layouts: [],
            isLoading: false,
        };
    },
    methods: {
        getLayouts() {
            this.beginLoading();
            BuilderClient
                .get('/layout')
                .then((json) => {
                    this.layouts =  json;
                    this.finishLoading();
                });
        },
        _selectLayout(layout) {
            this.selectLayout(layout);
        },
        beginLoading: function () {
            this.isLoading = true;
        },
        finishLoading: function () {
            this.isLoading = false;
        },
    },
    mounted() {
        this.getLayouts();
    },
    template: `
      <div class="d-flex flex-wrap justify-content-center">
        <div v-if="this.isLoading" v-html="this.builder.context.loader" ></div>
        <button v-if="!this.isLoading" v-for="layout in layouts" class="layout" v-on:click="_selectLayout(layout.value)" :title="layout.label">
          <img :src="layout.image" :alt="layout.label" width="80" height="40">
        </button>
      </div>
    `,
});