<template>
  <div
    v-show="columnDrawerOpen"
    :class="'columnSidebar__background '"
    @click="columnDrawerOpen = !columnDrawerOpen"
  />
  <div :class="'row ' + headerColor" :style="'background-color:' + headerColor">
    <div class="q-py-sm q-px-md full-width gt-sm" style="z-index: 4">
      <TableTopDesktop
        :selected="selected"
        :selection="selection"
        :page-actions="pageActions"
        :has-active-filters="hasActiveFilters"
        @on-search="(tableSearch) => emits('onSearch', tableSearch)"
        @active-action="(params) => emits('activeAction', params)"
        @on-cancel-selection="() => emits('onCancelSelection')"
        @on-confirm-selection="() => emits('onConfirmSelection')"
        @toggle-column-drawer="() => (columnDrawerOpen = !columnDrawerOpen)"
        @toggle-advanced-filters="() => emits('toggleAdvancedFilters')"
        @clear-filters="() => emits('clearFilters')"
      />
    </div>
    <div class="q-py-sm q-px-md full-width lt-md">
      <TableTopResponsive
        :selected="selected"
        :selection="selection"
        :page-actions="pageActions"
        :has-active-filters="hasActiveFilters"
        @on-search="(tableSearch) => emits('onSearch', tableSearch)"
        @active-action="(params) => emits('activeAction', params)"
        @on-cancel-selection="() => emits('onCancelSelection')"
        @on-confirm-selection="() => emits('onConfirmSelection')"
        @toggle-column-drawer="() => (columnDrawerOpen = !columnDrawerOpen)"
        @toggle-advanced-filters="() => emits('toggleAdvancedFilters')"
        @clear-filters="() => emits('clearFilters')"
      />
    </div>
    <KTableColumnDrawer
      v-model:column-drawer-open="columnDrawerOpen"
      :header-color="headerColor"
      :columns="columns"
      :visible-columns="visibleColumns"
    />
  </div>
</template>
<script setup>
import TableTopDesktop from "./TableTopDesktop.vue";
import TableTopResponsive from "./TableTopResponsive.vue";
import KTableColumnDrawer from "./KTableColumnDrawer.vue";

const visibleColumns = defineModel("visibleColumns", {
  type: Array,
  required: true,
  default: [],
});
const columnDrawerOpen = defineModel("columnDrawerOpen", {
  type: Boolean,
  required: true,
  default: false,
});

defineProps({
  /** Data of all columns */
  columns: { type: Array, required: true },
  /** List of action of current page */
  pageActions: {
    type: Array,
    required: true,
  },
  /** */
  backgroundColor: {
    type: String,
    default: "bg-k-primary",
  },
  /** Array of selected rows */
  selected: {
    type: Array,
    required: true,
  },
  /** Selection type */
  selection: {
    type: String,
    default: "none",
  },
  /** Color of the header */
  headerColor: {
    type: String,
    default: "#e3ddd6",
  },
  /** Whether there are active filters */
  hasActiveFilters: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits([
  "activeAdvancedFilters",
  "callFunction",
  "activeAction",
  "onCancelSelection",
  "onSearch",
  "confirmSelection",
  "onConfirmSelection",
  "toggleAdvancedFilters",
  "clearFilters",
]);
</script>

<style></style>
