<template>
  <BoilerplateElement :id="this.id">
    <template #german>
      <q-input :lazy-rules="true" rounded outlined v-model="elementData.german.name" :label="$t('contactElement.name')" bg-color="white" class="q-mb-md" :rules="validation.name" />
      <q-input rounded outlined v-model="elementData.german.role" :label="$t('contactElement.role')" bg-color="white" class="q-mb-md" />
      <div class="flex">
        <div class="w-50">
          <q-input :lazy-rules="true" rounded outlined v-model="elementData.email" class="q-mb-md q-mr-md" :label="$t('contactElement.email')" bg-color="white" :rules="validation.email" />
        </div>
        <div class="w-50">
          <q-input :lazy-rules="true" rounded outlined v-model="elementData.phone" class="q-mb-md q-ml-md" :label="$t('contactElement.phone')" bg-color="white" :rules="validation.phone" />
        </div>
      </div>
    </template>
    <template #english>
      <q-input :lazy-rules="true" rounded outlined v-model="elementData.english.name" :label="$t('contactElement.name')" bg-color="white" class="q-mb-md" :rules="validation.name" />
      <q-input rounded outlined v-model="elementData.english.role" :label="$t('contactElement.role')" bg-color="white" class="q-mb-md" />
      <div class="flex">
        <div class="w-50">
          <q-input :lazy-rules="true" rounded outlined v-model="elementData.email" class="q-mb-md q-mr-md" :label="$t('contactElement.email')" bg-color="white" :rules="validation.email" />
        </div>
        <div class="w-50">
          <q-input :lazy-rules="true" rounded outlined v-model="elementData.phone" class="q-mb-md q-ml-md" :label="$t('contactElement.phone')" bg-color="white" :rules="validation.phone" />
        </div>
      </div>
    </template>
  </BoilerplateElement>
</template>

<script>
import BoilerplateElement from 'src/components/BoilerplateElement.vue'

export default {
  data () {
    return {
      elementData: this.data,
      validation: {
        name: [
          (v) => {
            // error: Name is required
            const eId = 1
            const errorExists = this.elementData.errors.some(error => error.id === eId)
            if (v) {
              this.elementData.errors = this.elementData.errors.filter((error) => error.id !== eId)
              return true
            } else {
              if (!errorExists) {
                this.elementData.errors.push({ id: eId, message: this.$t('contactElement.error1') })
              }
              return this.$t('contactElement.error1')
            }
          },
          (v) => {
            // error: Name is too long
            const eId = 2
            const errorExists = this.elementData.errors.some(error => error.id === eId)
            if (v && v.length <= 30) {
              this.elementData.errors = this.elementData.errors.filter((error) => error.id !== eId)
              return true
            } else {
              if (!errorExists) {
                this.elementData.errors.push({ id: eId, message: this.$t('contactElement.error2') })
              }
              return this.$t('contactElement.error2')
            }
          }
        ],
        email: [
          (v) => {
            // error: email format
            const eId = 3
            const errorExists = this.elementData.errors.some(error => error.id === eId)
            if (v) {
              const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
              if (emailRegex.test(v)) {
                this.elementData.errors = this.elementData.errors.filter((error) => error.id !== eId)
                return true
              } else {
                if (!errorExists) {
                  this.elementData.errors.push({ id: eId, message: this.$t('contactElement.error3') })
                }
                return this.$t('contactElement.error3')
              }
            } else {
              this.elementData.errors = this.elementData.errors.filter((error) => error.id !== eId)
              return true
            }
          }
        ],
        phone: [
          (v) => {
            // error: phone format
            const eId = 4
            const errorExists = this.elementData.errors.some(error => error.id === eId)
            if (v) {
              const phoneRegex = /^[+]?[0-9\s]{10,}$/
              if (phoneRegex.test(v)) {
                this.elementData.errors = this.elementData.errors.filter((error) => error.id !== eId)
                return true
              } else {
                if (!errorExists) {
                  this.elementData.errors.push({ id: eId, message: this.$t('contactElement.error4') })
                }
                return this.$t('contactElement.error4')
              }
            } else {
              this.elementData.errors = this.elementData.errors.filter((error) => error.id !== eId)
              return true
            }
          }
        ]
      }
    }
  },
  props: {
    id: {
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  },
  components: {
    BoilerplateElement
  }
}
</script>