<template>
  <div
    class="row justify-between full-width no-wrap items-center"
    test-id="TableTopDesktop"
  >
    <div class="row content-center no-wrap">
      <div
        class="q-pr-lg float-left cursor-pointer no-wrap row items-center"
        test-id="advancedFiltersButton"
        @click="emits('toggleAdvancedFilters')"
      >
        <q-icon
          name="filter_alt"
          size="30px"
          class="cursor-pointer items-center"
        />
        <span>
          {{ $t("advancedFilters") }}
        </span>
      </div>
      <div
        v-if="hasActiveFilters"
        class="q-pr-lg float-left cursor-pointer no-wrap row items-center"
        test-id="clearFiltersButton"
        @click="emits('clearFilters')"
      >
        <q-icon
          name="filter_alt_off"
          size="30px"
          class="cursor-pointer items-center text-negative"
        />
        <span class="text-negative">
          {{ $t("clearFilters") }}
        </span>
      </div>
      <q-input
        v-model="tableSearch"
        dense
        clearable
        debounce="300"
        :placeholder="$t('search')"
        test-id="tableSearch"
        style="min-width: 100px"
        @update:model-value="
          () => {
            emits('onSearch', tableSearch);
          }
        "
      >
        <template #append>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    <div
      class="row items-center full-height float-right no-wrap overflow-auto q-pl-xl full-height"
    >
      <TableTopDesktopActionButtons
        :selected="selected"
        :selection="selection"
        :page-actions="pageActions"
        @active-action="(params) => emits('activeAction', params)"
        @on-cancel-selection="() => emits('onCancelSelection')"
        @on-confirm-selection="() => emits('onConfirmSelection')"
        @toggle-column-drawer="() => emits('toggleColumnDrawer')"
      />
    </div>
  </div>
</template>
<script setup>
import TableTopDesktopActionButtons from "./TableTopDesktopActionButtons.vue";
import { ref } from "vue";

defineProps({
  /** Color of the header */
  headerColor: {
    type: String,
    default: "#e3ddd6",
  },
  /** Selection type */
  selection: {
    type: String,
    default: "none",
  },
  /** List of action of current page */
  pageActions: {
    type: Array,
    required: true,
  },
  /** Array of selected rows */
  selected: {
    type: Array,
    required: true,
  },
  /** Whether there are active filters */
  hasActiveFilters: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits([
  "onSearch",
  "toggleAdvancedFilters",
  "activeAction",
  "onCancelSelection",
  "onConfirmSelection",
  "toggleColumnDrawer",
  "clearFilters",
]);
const tableSearch = ref(""); // Value in the search field
</script>
<style></style>
