<i18n>
{
  "en": {
    "SolutionsBasicForm": {
      "name": "Name",
      "shortTitle": "Short title",
      "applicationDescription": "Application description",
      "send": "Send",
      "needToAdd": "The field needs to be filled"
    }
  },
  "ru": {
    "SolutionsBasicForm": {
      "name": "Название приложения",
      "shortTitle": "Краткое название",
      "applicationDescription": "Описание приложения",
      "send": "Отправить",
      "needToAdd": "Поле нужно заполнить"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div v-if="readonly">
      <div class="row">
        <div class="col text-grey-5">{{ $t('SolutionsBasicForm.name') }}*</div>
        <div class="col text-grey-7">{{ name }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('SolutionsBasicForm.shortTitle') }}*
        </div>
        <div class="col text-grey-7">{{ shortname }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('SolutionsBasicForm.applicationDescription') }}*
        </div>
        <div class="col text-grey-7">{{ description }}</div>
      </div>
    </div>
    <div v-else>
      <div class="q-gutter-y-md">
        <div class="row q-gutter-y-md">
          <div class="col-12">
            <q-input
              v-model="name"
              filled
              :label="$t('SolutionsBasicForm.name') + ' *'"
              :rules="[() => !!name]"
              :error-message="$t('SolutionsBasicForm.needToAdd')"
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="shortname"
              filled
              :label="$t('SolutionsBasicForm.shortTitle')"
              :error="getErrorByFieldName('shortname')"
              :error-message="getErrorMessageByFieldName('shortname')"
            />
          </div>
          <div class="col-12">
            <q-input
              v-model="description"
              filled
              :label="$t('SolutionsBasicForm.applicationDescription')"
              type="textarea"
            />
          </div>
        </div>
        <div class="q-mt-lg">
          <q-btn
            color="primary"
            :label="$t('SolutionsBasicForm.send')"
            type="submit"
          />
        </div>
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import { v4 } from 'uuid';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      name: '',
      shortname: '',
      description: '',
      modified: '',
      id: '',
      mockErrors: [],
    };
  },
  computed: {
    outputData() {
      return {
        id: this.id,
        modified: this.modified,
        name: this.name,
        shortname: this.shortname,
        description: this.description,
      };
    },
    errors() {
      return this.mockErrors
        .filter((el) => !el.success)
        .map((el) => {
          return {
            message: el.errors.join(', '),
            name: el.name,
          };
        });
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        this.id = v4();
        if (val) {
          this.name = val.name || '';
          this.shortname = val.shortname || '';
          this.description = val.description || '';
          this.modified = val.modified || '';
          this.id = val.id || v4();
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    createSolution(e) {
      this.$emit('submit', e, {
        transCreate: true,
        transSearch: false,
        transSelect: false,
        ...this.outputData,
      });
    },
    chooseSolution(e) {
      const solution = this.selected[0] || null;

      this.$emit('submit', e, {
        transCreate: false,
        transSearch: false,
        transSelect: true,
        ...this.outputData,
        solution,
      });
    },
    searchSolution(e) {
      this.$emit('submit', e, {
        transCreate: false,
        transSearch: true,
        transSelect: false,
        ...this.outputData,
      });
    },
    getErrorByFieldName(name) {
      return !!this.errors.find((el) => el.name === name);
    },
    getErrorMessageByFieldName(name) {
      const error = this.errors.find((el) => el.name === name);

      return error ? error.message : '';
    },
  },
};
</script>
