<template>
  <v-form ref="formGen" lazy-loading>
    <v-layout>
      <v-flex v-for="(row, idx) in form" :key="`row-${idx}`">
        <v-layout column mx-3>
          <v-flex v-for="input in row.list" :key="input.field">
            <v-text-field
              v-if="input.type === 'text'"
              v-model="doc[input.field]"
              :label="input.label"
              :disabled="input.disabled || disabled"
              :rules="getRules(input)"
              @change="triggerUp()"
            />

            <v-select
              v-if="input.type === 'select'"
              v-model="doc[input.field]"
              :label="input.label"
              :items="input.items"
              :disabled="input.disabled || disabled"
              :multiple="input.multiple"
              item-text="label"
              @change="triggerUp()"
            />

            <media-uploader
              v-if="input.type === 'media'"
              v-model="doc[input.field]"
              :disabled="input.disabled || disabled"
              :doc-coll="coll.type"
              :doc-id="coll.id"
              :doc-path="input.field"
              @change="triggerUp()"
            />

            <select-api
              v-if="input.type === 'select-api'"
              v-model="doc[input.field]"
              :label="input.label"
              :collection="input.items"
              :multiple="input.multiple"
              @change="triggerUp()"
            />

            <v-textarea
              v-if="input.type === 'textarea'"
              v-model="doc[input.field]"
              :label="input.label"
              :disabled="input.disabled || disabled"
              @change="triggerUp()"
            />
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-form>
</template>

<script>
import MediaUploader from '@/components/MediaUploader.vue'
import SelectApi from '@/components/SelectApi.vue'

export default {
  name: 'FormGen',
  components: { MediaUploader, SelectApi },
  props: {
    value: { type: Object, default: () => {} },
    more: { type: String, default: null },
    form: { type: Array, default: () => {} },
    coll: { type: Object, default: null },
    disabled: { type: Boolean, default: false }
  },
  data: () => ({
    doc: {}
  }),
  mounted () {
    if (this.more) {
      this.value[this.more] = this.value[this.more] || {}
      this.doc = this.value[this.more]
    } else {
      this.doc = this.value
    }
  },
  methods: {
    getRules (input) {
      if (!input.rules) { return [] }
      const rules = []
      if (input.rules.required) {
        rules.push(v => !!v || input.rules.required)
      }
      if (input.rules.regex) {
        const aRegex = input.rules.regex.split(';')
        const nRegex = new RegExp(aRegex[0], aRegex[1])
        rules.push(v => nRegex.test(v) || aRegex[2] || 'Field must be valid')
      }
      return rules
    },
    triggerUp () {
      const valid = this.$refs.formGen.validate()
      this.$emit('update')
      this.$emit('valid', valid)
    }
  }
}
</script>
