<template>
  <v-container fluid>
    <v-toolbar dense flat>
      <v-overflow-btn
        :items="components"
        v-model="componentSelected"
        item-text="name"
        return-object
        editable
        label="Choose a component"
        hide-details
        class="pa-0"
        overflow
      ></v-overflow-btn>

      <v-btn icon>
        <v-icon @click="addComponent(componentSelected)" size="15">icon-add</v-icon>
      </v-btn>
    </v-toolbar>

    <!-- Dynamic Component -->
    <component :is="componentSelected.name" :data="componentSelected.data" />
    <!-- End Dynamic Component -->

    <!-- Components Sort -->
    <v-card outlined tile v-if="tmpPage.length > 0">
      <v-toolbar dark dense flat color="red">
        <v-toolbar-title>Sort Components</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-icon>mdi-sort</v-icon>
      </v-toolbar>

      <v-card-text class="my-0 py-0">
        <v-list>
          <draggable v-model="tmpPage">
            <transition-group>
              <v-list-item v-for="(component, index) in tmpPage" :key="component">
                <v-list-item-action>
                  <v-badge overlap>
                    <template v-slot:badge>
                      <span class="white--text">{{index+1}}</span>
                    </template>
                  </v-badge>
                </v-list-item-action>

                <v-list-item-content>
                  <v-list-item-title v-text="`${component.name}`"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </transition-group>
          </draggable>
        </v-list>
      </v-card-text>

      <v-card-actions>
        <v-btn block color="red" depressed dark @click>Save</v-btn>
      </v-card-actions>
    </v-card>
    <!-- end Components Sort -->
  </v-container>
</template>

<script>
/**
 * Builder
 *
 * Load a list of custom components from dynamicComponents dir?
 *
 * Clicking on ADD, we put in the preview page that component
 *
 * clicking on that component, we can pass some data
 *
 *  https://www.storyblok.com/tp/vue-dynamic-component-from-json
 *
 *  https://baianat.github.io/vuse/example.html
 *
 * -------
 * https://github.com/tommcclean/Vue-PageBuilder
 * https://www.youtube.com/watch?v=Iwwv0A7ttpQ&feature=youtu.be
 * -------
 *
 */

import Draggable from 'vuedraggable'
import Calendar from '@/components/DynamicComponents/Calendar'
import Carousel from '@/components/DynamicComponents/Carousel'
import Card from '@/components/DynamicComponents/Card'

export default {
  components: {
    Calendar,
    Card,
    Carousel,
    Draggable
  },
  layout: `${process.env.CUSTOMER}Admin`,
  data: () => ({
    tmpPage: [],
    componentSelected: '',
    components: [
      {
        name: 'Carousel',
        data: {
          items: [
            {
              src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
            },
            {
              src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
            },
            {
              src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
            },
            {
              src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
            }
          ]
        }
      },

      {
        name: 'Card',
        data: {
          title: '3110 Card',
          image: 'https://cdn.vuetifyjs.com/images/cards/cooking.png'
        }
      }
    ],
    carousel: {
      name: 'Carousel'
    }
  }),
  methods: {
    addComponent(component) {
      this.tmpPage.push(component)
    }
  }
}
</script>