<template>
  <BoilerplateElement :id="this.id">
    <template #german>
      <q-input rounded outlined v-model="elementData.german.shortTitle" :label="$t('titleElement.shortTitle')" bg-color="white" class="q-mb-md w-50" :rules="validation.shortTitle" />
      <q-input rounded outlined v-model="elementData.german.title" :label="$t('titleElement.title')" bg-color="white" :rules="validation.title" />
    </template>
    <template #english>
      <q-input rounded outlined v-model="elementData.english.shortTitle" :label="$t('titleElement.shortTitle')" bg-color="white" class="q-mb-md w-50" :rules="validation.shortTitle" />
      <q-input rounded outlined v-model="elementData.english.title" :label="$t('titleElement.title')" bg-color="white" :rules="validation.title" />
    </template>
  </BoilerplateElement>
</template>

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

export default {
  data () {
    return {
      elementData: this.data,
      validation: {
        shortTitle: [
          (v) => {
            // error: shortTitle 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('titleElement.error1') })
              }
              return this.$t('titleElement.error1')
            }
          },
          (v) => {
            // error: shortTitle 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('titleElement.error2') })
              }
              return this.$t('titleElement.error2')
            }
          }
        ],
        title: [
          (v) => {
            // error: title is required
            const eId = 3
            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('titleElement.error3') })
              }
              return this.$t('titleElement.error3')
            }
          }
        ]
      }
    }
  },
  props: {
    id: {
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  },
  components: {
    BoilerplateElement
  }
}
</script>