<template>
  <div class="component-content" :class="componentSlug + '-component'">
    <div class="component-properties">
      <div class="property-container" :class="slugify(property.name) + '-property-container'" v-for="property in 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" />
        </div>
        <array-props :name="property.name" :properties="property.properties" @update-array="property.value = arguments[0]" v-model="property.value" v-else />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "componentSlug", "properties", "index" ],
    data() {
      return {
      
      }
    },
    methods: {
      slugify(text) {
        return text.trim()
          .toLowerCase()
          .replace(/[^a-z0-9-]/gi, '_')
          .replace(/_{2,}/g, '')
          .replace(/-+/g, '_')
          .replace(/^-|-$/g, '');
      }
    }
  }
</script>