<template>
  <div class="text-xs-center">
    <v-dialog
      v-model="dialog"
      scrollable
      width="500"
    >
      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          Select new section format
        </v-card-title>

        <v-card-text>
          <div v-for="(format, fIdx) in formats" :key="format.join()">
            <h4 v-if="showTitle(fIdx)">
              {{ format.length }} Column(s)
            </h4>
            <v-layout row ma-2 elevation-3 class="add-section" @click="selectSection(format)">
              <v-flex v-for="(size, idx) in format" :key="format.join()+idx" :[`xs${size}`]="true" class="add-section--coll" />
            </v-layout>
          </div>
        </v-card-text>

        <v-divider />

        <v-card-actions>
          <v-spacer />
          <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
            Fermer
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    formats: [
      [12],
      [6, 6],
      [4, 8],
      [8, 4],
      [4, 4, 4],
      [3, 6, 3],
      [3, 3, 3, 3]
    ]
  }),
  created () {
    this.$parent.$on('section:add', this.openDialog)
  },
  methods: {
    selectSection (format) {
      this.$emit('newsection', format)
      this.dialog = false
    },
    openDialog () {
      this.dialog = true
    },
    showTitle (idx) {
      if (idx === 0) {
        return true
      } else {
        const cLength = this.formats[idx].length
        const nLength = this.formats[idx - 1].length
        return cLength !== nLength
      }
    }
  }
}
</script>

<style scoped>
.add-section--coll {
  outline: 1px dashed;
}
.add-section {
  cursor: pointer;
  min-height: 30px;
  margin: 0.5em 0;
}
.add-section:hover {
  background: #CCC;
}
</style>
