<i18n>
{
  "en": {
    "EmployeesCredentialForm": {
      "formName": "User data:",
      "userDataChoice": "Select user data",
      "changeData": "Change Data",
      "createNew": "Create New"
    }
  },
  "ru": {
    "EmployeesCredentialForm": {
      "formName": "Пользовательские данные:",
      "userDataChoice": "Выбор пользовательских данных",
      "changeData": "Изменить данные",
      "createNew": "Создать новые"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div class="row q-gutter-x-md">
      <div class="col-12 q-mb-md">
        <h6 class="q-my-none">{{ $t('EmployeesCredentialForm.formName') }}</h6>
      </div>
      <div v-if="credentials.length" class="col">
        <q-select
          v-model="credential"
          :options="credentials"
          emit-value
          filled
          :label="$t('EmployeesCredentialForm.UserDataChoice')"
          lazy-rules
          map-options
        />
      </div>
    </div>
    <q-btn
      v-if="credential"
      class="q-mr-md"
      color="primary"
      :label="$t('EmployeesCredentialForm.changeData')"
      type="button"
      @click="editCredential"
    />
    <q-btn
      color="primary"
      :label="$t('EmployeesCredentialForm.createNew')"
      type="button"
      @click="createCredential"
    />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data'],
  data() {
    return {
      credential: null,
      credentials: [],
    };
  },
  computed: {
    outputData() {
      return {};
    },
  },
  created() {
    if (
      this.inputData.credentials &&
      this.inputData.credentials instanceof Array
    ) {
      this.credentials = this.inputData.credentials.map((currentCredential) => {
        return {
          value: currentCredential.id,
          label: currentCredential.userName,
        };
      });
    }
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    createCredential(e) {
      this.$emit('submit', e, {
        transCreate: true,
      });
    },
    editCredential(e) {
      let selectedCredential = {};

      if (this.inputData.credentials && this.credential) {
        this.inputData.credentials.forEach((currentCredential) => {
          if (this.credential === currentCredential.id) {
            selectedCredential = currentCredential;
          }
        });
      }
      this.$emit('submit', e, {
        transCreate: false,
        selectedCredential,
      });
    },
  },
};
</script>
