<i18n>
{
  "en": {
    "SolutionsBasicRoleForm": {
      "displayName": "Name",
      "name": "Role name",
      "roleDescription": "Role description",
      "send": "Send",
      "needToAdd": "The field needs to be filled"
    }
  },
  "ru": {
    "SolutionsBasicRoleForm": {
      "displayName": "Наименование",
      "name": "Системное имя",
      "roleDescription": "Описание роли",
      "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('SolutionsBasicRoleForm.name') }}*
        </div>
        <div class="col text-grey-7">{{ name }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('SolutionsBasicRoleForm.displayName') }}*
        </div>
        <div class="col text-grey-7">{{ displayName }}</div>
      </div>
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('SolutionsBasicRoleForm.roleDescription') }}
        </div>
        <div class="col text-grey-7">{{ description }}</div>
      </div>
    </div>
    <div v-else>
      <div class="row q-gutter-y-md">
        <div class="col-12">
          <q-input
            v-model="name"
            filled
            :label="$t('SolutionsBasicRoleForm.name') + ' *'"
            :rules="[() => !!name]"
            :error-message="$t('SolutionsBasicRoleForm.needToAdd')"
          />
        </div>
        <div class="col-12">
          <q-input
            v-model="displayName"
            filled
            :label="$t('SolutionsBasicRoleForm.displayName') + ' *'"
            :rules="[() => !!displayName]"
            :error-message="$t('SolutionsBasicRoleForm.needToAdd')"
          />
        </div>
        <div class="col-12">
          <q-input
            v-model="description"
            filled
            :label="$t('SolutionsBasicRoleForm.roleDescription')"
            type="textarea"
          />
        </div>
      </div>
      <div class="q-mt-lg">
        <q-btn
          color="primary"
          :label="$t('SolutionsBasicRoleForm.send')"
          type="submit"
        />
      </div>
    </div>
  </q-form>
</template>

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

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      name: '',
      displayName: '',
      description: '',
      modified: '',
      id: '',
    };
  },
  computed: {
    outputData() {
      return {
        id: this.id,
        modified: this.modified,
        name: this.name,
        displayName: this.displayName,
        description: this.description,
        role: {
          selectedRole: [
            {
              name: this.name,
              displayName: this.displayName,
              description: this.description,
            },
          ],
        },
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        this.id = v4();
        if (val && val.role) {
          this.id = val.role.id || v4();
        }
        const selectedRole =
          val && val.role && val.role.selectedRole && val.role.selectedRole[0];
        if (selectedRole) {
          this.name = selectedRole.name || '';
          this.displayName = selectedRole.displayName || '';
          this.description = selectedRole.description || '';
          this.modified = selectedRole.modified || '';
          this.id = selectedRole.id || '';
        }
      },
      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,
      });
    },
  },
};
</script>
