<i18n>
{
  "en": {
    "directoryCode": "Code directory",
    "joint": "Joint",
    "directory": "Directory"
  },
  "ru": {
    "directoryCode": "Код справочника",
    "joint": "Связь",
    "directory": "Справочник"
  }
}
</i18n>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { v4 } from 'uuid';

import { QSelectOption } from '@/models/models-ui';

type UUID = string;

export type Directorylinks = {
  uuid: UUID;
  linkName: string;
  linkCode: string;
  directoryCode: string;
};

const LINKS = {
  TYPE_RELATED_CONNECTION: 'Тип родственных отношений',
  TYPE_INCOME: 'Тип доходов',
  INCOME_SOURCE: 'Источник дохода',
  REASONS_EXCLUSION_FAMILY_MEMBERS: 'Причины исключения членов семьи'
};

function createDefault(links: { [key: string]: string }) {
  return Object.entries(links).map((value) => ({
    uuid: v4(),
    linkCode: value[0],
    linkName: value[1],
    directoryCode: '',
  }));
}

@Component({})
export default class IncomeDirectorylinks extends Vue {
  @Prop({ default: () => [], required: true })
  dictionaries: QSelectOption[];

  @Prop({ default: () => [], required: true })
  directoryLinks: Directorylinks[];

  @Prop({ default: true }) canEdit: boolean;

  columns = [
    {
      align: 'left',
      field: 'uuid',
      label: this.$t('services.id'),
      name: 'uuid',
      style: 'white-space: normal;',
      headerStyle: 'font-size: 16px; font-weight: 600; min-width: 300px',
    },
    {
      align: 'left',
      field: 'link',
      label: this.$t('joint'),
      name: 'link',
      sortable: true,
      style: 'white-space: normal;',
      headerStyle: 'font-size: 16px; font-weight: 600; min-width: 300px',
    },
    {
      align: 'left',
      field: 'directoryCode',
      label: this.$t('directoryCode'),
      name: 'directoryCode',
      sortable: true,
      style: 'white-space: normal;',
      headerStyle: 'font-size: 16px; font-weight: 600; min-width: 300px',
    },
  ];

  pagination = {
    rowsPerPage: 0,
  };

  mode: 'edit' | null = null;
  links: Directorylinks[] = createDefault(LINKS);

  get designBtn() {
    return this.mode === 'edit' ? 'save' : 'edit';
  }

  mounted() {
    if (this.directoryLinks?.length) {
      const selectedLinks = this.directoryLinks.map((v) => v.linkCode);
      
      this.links = [
        ...this.directoryLinks,
        ...this.links.filter((link) => !selectedLinks.includes(link.linkCode)),
      ];
    }
  }

  toggleProcess() {
    this.mode = this.mode === 'edit' ? null : 'edit';
  }

  submit() {
    if (this.mode === 'edit') {
      this.$emit('update', this.links);
    }

    this.toggleProcess();
  }
}
</script>

<template>
  <div>
    <div class="flex justify-between q-my-md row" style="width: 100%">
      <div class="text-h6">{{ $t('base.directories') }}</div>
      <div>
        <q-btn
          v-if="canEdit"
          class="q-mr-sm"
          color="primary"
          :icon="designBtn"
          :label="$t(`base.${designBtn}`)"
          @click="submit"
        />
      </div>
    </div>

    <q-table
      :columns="columns"
      :data="links"
      :pagination.sync="pagination"
      hide-bottom
    >
      <template #body="props">
        <q-tr :props="props">
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <template v-if="col.name === 'link'">
              <p class="q-mb-xs">{{ props.row.linkName }}</p>
              <q-badge color="secondary" :label="props.row.linkCode" />
            </template>

            <template
              v-else-if="col.name === 'directoryCode' && mode === 'edit'"
            >
              <q-select
                v-model="props.row.directoryCode"
                :options="dictionaries"
                :label="$t('directory')"
                emit-value
                map-options
                filled
              />
            </template>

            <template v-else>
              {{ col.value }}
            </template>
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>
