<template>
  <div
    class="row items-center q-mx-sm table-top-responsive"
    test-id="tableTopResponsive"
  >
    <MenuKettal
      class="q-mr-lg menu-icon"
      test-id="TableActionsButton"
      @click="tableDrawer = !tableDrawer"
    />
    <q-input
      dense
      v-model="tableSearch"
      class="col search-input"
      square
      :label="$t('search')"
      outlined
      test-id="responsiveTableSearch"
      @update:model-value="
        () => {
          emits('onSearch', tableSearch);
        }
      "
    />
    <q-icon
      name="filter_alt"
      class="cursor-pointer items-center q-ml-md filter-icon"
      test-id="responsiveAdvancedFiltersButton"
      @click="emits('toggleAdvancedFilters')"
    />
    <q-icon
      v-if="hasActiveFilters"
      name="filter_alt_off"
      class="cursor-pointer items-center q-ml-sm filter-icon text-negative"
      test-id="responsiveClearFiltersButton"
      @click="emits('clearFilters')"
    />
  </div>
  <q-drawer v-model="tableDrawer" no-swipe-open>
    <TableTopResponsiveSidebar
      :page-actions="pageActions"
      @active-action="(action) => emits('activeAction', action)"
      @close="tableDrawer = false"
      @toggle-column-drawer="emits('toggleColumnDrawer')"
    />
  </q-drawer>
</template>
<script setup>
import { ref } from "vue";
import MenuKettal from "@/assets/icons/MenuKettal.svg";
import TableTopResponsiveSidebar from "./TableTopResponsiveSidebar.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",
  "toggleColumnDrawer",
  "onCancelSelection",
  "onConfirmSelection",
  "clearFilters",
]);
const tableSearch = ref(""); // Value in the search field
const tableDrawer = ref(false); // Value of the drawer
</script>

<style lang="scss">
.table-top-responsive {
  @media (max-width: 600px) {
    .menu-icon {
      width: 20px;
      height: 20px;
    }

    .search-input {
      :deep(.q-field__control) {
        height: 32px;
        font-size: 14px;
      }
    }

    .filter-icon {
      font-size: 20px;
    }
  }
}
</style>
