<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('registries.label') }}
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :title="$t('registries.listLabel')"
        :columns="columns"
        :data="model.records"
        :loading="model.loading"
        :pagination.sync="pagination"
        :rows-per-page-options="rowPerPageList"
        :visible-columns="visibleColumns"
        @requestTable="init"
        @update="init"
        saveQuery
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import QColumn from '@/types/QColumn';
import { USER_SCOPES } from '@constants/entities/Scope';
import { Registry } from '@openapi/registry-service';
import { TablePagination } from '@/models/base/TablePagination';

function getSringFromQuery(field: string, query: Record<string, string | (string | null)[]>): string | undefined {
  return !!query[field] ? String(query[field]) : undefined;
}

@Component({
})
export default class BaseRegistryPage extends Vue {
  public get rowsPerPage() {
    return this.isAdmin ? 10 : 100;
  }
  public rowPerPageList = [10, 50, 100];
  public sortByDefault = 'modified';
  get visibleColumns(): string[] {
      return [];
  }

  public USER_SCOPES = USER_SCOPES;
  model = {
    loading: false,
    records: [] as Registry[],
  };

  pagination: TablePagination = {
    descending: true,
    rowsPerPage: 0,
    sortBy: 'modified',
    rowsNumber: 0,
    page: 0,
  };

  registryDialog = false;
  formModel: Partial<Registry> | null = null;

  columns: QColumn[] = [
    {
      align: 'left',
      field: (val: any) => val,
      formatField: 'name',
      handlerField: 'id',
      label: this.$t('registries.name'),
      name: 'name',
      required: true,
      sortable: true,
    },
    {
      align: 'left',
      field: 'description',
      label: this.$t('registries.description'),
      name: 'description',
      required: true,
      classes: ['registries-table__descr-col'],
      sortable: true,
    },
  ];

  created() {
    const sortBy = getSringFromQuery('sortBy', this.$route.query);
    const rowsPerPage = getSringFromQuery('rowsPerPage', this.$route.query);
    const descending = getSringFromQuery('descending', this.$route.query);
    const page = getSringFromQuery('page', this.$route.query);
    this.init({
      pagination: {
        descending:
          descending === undefined
            ? true
            : descending === 'true',
        rowsPerPage: rowsPerPage
          ? Number(rowsPerPage)
          : this.rowsPerPage,
        sortBy: sortBy
          ? sortBy
          : this.sortByDefault,
        rowsNumber: 0,
        page: page ? Number(page) : 1,
      }
    });
  }

  setPagination(pagination: TablePagination): void {
    this.pagination.descending = !!pagination.descending;
    this.pagination.rowsPerPage = pagination.rowsPerPage;
    this.pagination.page = pagination.page;
    this.pagination.sortBy =
      pagination.sortBy === null
        ? this.sortByDefault
        : pagination.sortBy;
  }

  init(val: any = null) {
    if (val?.pagination) {
      this.setPagination(val.pagination)
    }
    this.fetch();
  }

  fetch(): Promise<void> {
    return Promise.resolve()
  }

  get sort(): string {
    return `${this.pagination.descending ? '-' : '+'}${
      this.pagination.sortBy
    }`;
  }

  public get isAdmin(): boolean {
    return this.$AC.haveScope(USER_SCOPES.CLOUD_ADMIN);
  }
}
</script>

<style lang="scss">
.registries-table {
  &__descr-col {
    width: 758px;
    white-space: normal !important;
  }
}
</style>
