<template>
  <div class="array-property">
    <div class="header mid-gray" @click.stop="showProps = !showProps">
      <div class="left">
        <span class="name">Manage Content</span>
      </div>
      <div class="right">
        <a class="icon-container">
          <i class="far fa-fw" :class="{ 'fa-angle-down': !showProps, 'fa-angle-up': !!showProps }"></i>
        </a>
      </div>
    </div>
    <div class="array-content" v-if="!!showProps">
      <div class="property-group" v-for="(group, index) in propertyGroups" v-if="!!showProps">
        <div class="header" @click="group.closed = !group.closed">
          <div class="left">
            <div class="move-container">
              <a class="icon-container" title="Move Up" @click.stop="moveUp(index)" v-if="index > 0">
                <i class="far fa-arrow-up"></i>
              </a>
              <a class="icon-container" title="Move Down" @click.stop="moveDown(index)" v-if="index < propertyGroups.length - 1">
                <i class="far fa-arrow-down"></i>
              </a>
            </div>
            <span class="name">{{ name }} {{ index + 1 }}</span>
          </div>
          <div class="right">
            <a class="icon-container" @click="removeGroup(index)">
              <i class="fas fa-trash-alt icon-button"></i>
            </a>
          </div>
        </div>
        <div class="properties-container" v-show="!group.closed">
          <div class="property-container" :class="slugify(property.name) + '-property-container'" v-for="property in group.properties">
            <div class="title" v-if="property.type !== 'array'">{{ property.name }}</div>
            <div class="property" :class="'property-' + slugify(property.type)" v-if="property.type !== 'array'">
              <input-field :data="property" :unique-name="slugify(property.name) + '_' + index" v-model="property.value" @input="$emit('update-array', propertyGroups)" />
            </div>
          </div>
        </div>
      </div>
      <div class="add-new-container">
        <div class="container" @click="addNew">
          <div class="icon">
            <i class="far fa-plus"></i>
          </div>
          <div class="text">Add New</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "value", "name", "properties" ],
    data() {
      return {
        showProps: false,
        propertyGroups: null
      }
    },
    mounted() {
      if (!!this.value) {
        this.propertyGroups = this.value.map( function(group) {
          group.closed = true;
          return group;
        });
      }
    },
    methods: {
      slugify(text) {
        return text.trim()
          .toLowerCase()
          .replace(/[^a-z0-9-]/gi, '_')
          .replace(/_{2,}/g, '')
          .replace(/-+/g, '_')
          .replace(/^-|-$/g, '');
      },
      addNew() {
        if (!this.propertyGroups) {
          this.propertyGroups = [];
        }
        let group = {
          closed: false,
          properties: _.cloneDeep(this.properties)
        };
        this.propertyGroups.push(group);
        this.$emit('update-array', this.propertyGroups);
      },
      moveUp(index) {
        this.propertyGroups.splice(index-1, 2, this.propertyGroups[index], this.propertyGroups[index-1])
      },
      moveDown(index) {
        this.propertyGroups.splice(index, 2, this.propertyGroups[index+1], this.propertyGroups[index])
      },
      removeGroup(index) {
        this.propertyGroups.splice(index, 1);
      }
    }
  }
</script>