<template>
  <bms-server-table
    v-model:selectedItems="selectedItems"
    v-model:selectMode="selectMode"
    mode="dense"
    :headers="serverHeaders"
    :request="customFetchData"
    :filters="filters"
    :initial-page="1"
    :canSaveFilters="true"
    :savedFilters="savedFilters"
    :selectable="true"
    :total="totalItems"
    @saveFilter="onSaveFilter"
    @deleteSavedFilter="onDeleteSavedFilter"
  >
    <template #default="{ row }: { row: any }">
      <td>
        {{ row.id }}
      </td>
      <td>
        {{ row.name }}
      </td>
      <td>
        {{ row.type.join(', ') }}
      </td>
    </template>
  </bms-server-table>
  <div>type de selection {{ selectMode }}</div>
  <div>Nb Selected items: {{ selectedItems.length }}</div>
  <div>
    Selected items:
    {{ selectedItems?.map((i: any) => '#' + i.id + ' : ' + i.name).join(', ') }}
  </div>
</template>

<script lang="ts" setup>
import { Filter, InputType, SavedFilter, SelectMode } from '@/models';
import axios from 'axios';
import { computed, Ref, ref } from 'vue';
import { isEmptyStringOrNotDefined } from '@/helpers';

const serverHeaders = [
  { label: 'Numéro', key: 'id' },
  { label: 'Name', key: 'name' },
  { label: 'Type', key: 'type' },
];

const pokemonTypeAutocompleteRequest = async (
  abortController: AbortController,
) => {
  const { data } = await axios.get('http://localhost:3000/pokemon-types', {
    signal: abortController.signal,
  });

  return { data };
};

const filters: Filter[] = [
  {
    label: 'Name',
    key: 'name',
    type: 'input',
  },
  {
    label: 'Number',
    key: 'idBetween',
    type: 'betweenNumber',
    inputType: InputType.NUMBER,
  },
  {
    label: 'Type',
    key: 'type',
    type: 'autocompleteServer',
    autocompleteRequest: pokemonTypeAutocompleteRequest,
  },
];

const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
const selectedItems = ref<any[]>([]);
const selectMode = ref<SelectMode>(SelectMode.DEFAULT);
const totalItems = ref(151);

const onSaveFilter = (savedFilter: SavedFilter) => {
  savedFilters.value.push(savedFilter);
};

const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
  savedFilters.value = savedFilters.value.filter(
    (filter) => filter.id !== savedFilter.id,
  );
};
const customFetchData = async (
  params: any,
  abortController: AbortController,
) => {
  const queryParams: any = {
    size: params.size,
    page: params.page,
  };

  if (params.filters) {
    params.filters.forEach((filter: Filter) => {
      if (filter.value !== null && filter.value !== '') {
        queryParams[filter.key] = filter.value;
      }
      if (!isEmptyStringOrNotDefined(filter.valueFrom)) {
        queryParams[filter.key] = filter.valueFrom;
      }
      if (!isEmptyStringOrNotDefined(filter.valueTo)) {
        queryParams[filter.key] =
          queryParams[filter.key] + '|' + filter.valueTo;
      }
    });
  }

  if (params.search) {
    queryParams['name'] = params.search;
  }
  const { data } = await axios.get('http://localhost:3000/pokemons', {
    signal: abortController.signal,
    params: queryParams,
  });

  return {
    total: 151,
    data,
  };
};
</script>
