import get from 'lodash/get';
import { Component, Watch } from 'vue-property-decorator';
import Vue from 'vue';
import { ConditionType } from '@components/common/base-search-bar';
import { i18n } from '@plugins/i18n';

@Component({})
export default class Resources extends Vue {
  @Watch('inputSearch')
  private inputSearchHandler(): void {
    this.init();
  }

  @Watch('resourcesRowsNumber', {
    immediate: true,
  })
  private resourcesRowsNumberHandler(val: number): void {
    this.model.pagination.rowsNumber = val;
  }

  model = {
    query: '',
    pagination: {
      descending: true,
      page: 1,
      rowsNumber: 0,
      rowsPerPage: 10,
      sortBy: 'modified',
    },
    visibleColumns: ['id', 'description'],
  };

  inputSearch = '';

  attributes = [
    {
      attribute: 'description',
      attributeName: i18n.t('resources.description'),
      conditionType: ConditionType.string,
      value: '',
    },
  ];

  private get columns() {
    return [
      {
        align: 'left',
        field: 'id',
        label: this.$t('resources.name'),
        name: 'name',
        required: true,
        sortable: true,
      },
      {
        align: 'left',
        field: 'description',
        label: this.$t('resources.description'),
        name: 'description',
        required: true,
        sortable: true,
      },
      {
        align: 'left',
        field: 'url',
        label: this.$t('resources.url'),
        name: 'url',
        required: true,
        sortable: true,
      },
      {
        align: 'left',
        field: (val: any) => val,
        formatField: 'path',
        handler: (id: any) => {
          this.$router.push({
            name: 'cards',
            params: {
              id: id,
              path: 'resources',
            },
            query: {
              components: this.$store.getters[
                'cardComponents/resources/components'
              ],
              active: 'basic',
            },
          });
        },
        handlerField: 'id',
        icon: 'work',
        label: this.$t('resources.path'),
        name: 'path',
        required: true,
        sortable: true,
      },
    ];
  }

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

  created() {
    this.init();
  }

  private create() {
    this.$router.push({
      name: 'resources-create',
    });
  }

  private setQuery(q?: string) {
    this.model.query = q || '';
    this.init();
  }

  private init(val: any = null): void {
    if (
      get(
        {
          val,
        },
        'val.pagination'
      )
    ) {
      this.model.pagination.descending = val.pagination.descending;
      this.model.pagination.page = val.pagination.page;
      this.model.pagination.rowsPerPage = val.pagination.rowsPerPage;
      this.model.pagination.sortBy = val.pagination.sortBy;
    }

    const pagination = {
      page: this.model.pagination.page,
      rowsPerPage: this.model.pagination.rowsPerPage,
      sort: '',
    };

    if (this.sort) {
      pagination.sort = this.sort;
    }

    const arrFulltext = [
      this.inputSearch
        ? `(id=searchprefix='${this.inputSearch}' or path=searchprefix='${this.inputSearch}')`
        : null,
    ];

    const fulltext = arrFulltext
      .filter((filter: string | null) => !!filter)
      .join(' and ');

    const arrQuery = [
      this.model.query,
      get({ model: this.model }, 'model.onlyMy') ? 'own_type==my' : null,
    ];
    const currentQuery = arrQuery.filter((filter) => !!filter).join(' and ');

    this.$store.dispatch('idm/resources/dispatchResources', {
      pagination,
      query: currentQuery,
      fulltext,
    });
  }

  get resourcesRowsNumber() {
    return this.$store.getters['idm/resources/resourcesRowsNumber'];
  }

  get resourcesLoading() {
    return this.$store.getters['idm/resources/resourcesLoading'];
  }

  get resourcesRecords() {
    return this.$store.getters['idm/resources/resourcesRecords'];
  }
}
