<template lang="">
  <q-tr class="beatriceMedium">
    <q-th v-if="selection !== 'none'" style="max-width: 4rem">
      <q-checkbox
        v-if="selection === 'multiple'"
        v-model:model-value="slotProps.selected"
        :disable="action.actionSelectionRules !== null"
        test-id="selectAllCheckbox"
        class="float-left"
      >
        <q-tooltip>
          {{ $t("notAllRowsAreSelectable") }}
        </q-tooltip>
      </q-checkbox>
    </q-th>
    <q-th
      v-for="col in slotProps.cols"
      :key="col.name"
      :test-id="col.name + 'Header'"
      :class="col.headerClasses + ' tableLabel ' + col.align"
      @click="
        () => {
          emit('sortBy', { col: col.name, arrow: 'arrowSort__' + col.name });
        }
      "
    >
      <div
        :align="col.type"
        class="'full-width row no-wrap tableHeader__label justify-between items-center"
      >
        <span :align="col.type">{{ $t(col.label) }}</span>
        <div v-if="col.sortable" class="column justify-end">
          <q-icon
            name="arrow_upward"
            :align="col.type"
            :class="'arrowSort arrowSort__' + col.name"
            size="1.1rem"
            descending=""
          />
        </div>
      </div>
    </q-th>
  </q-tr>
  <KTableHeaderAdvancedFilters
    v-model:advanced-filters="advancedFilters"
    :selection="selection"
    :show-advanced-filters="showAdvancedFilters"
    :action="action"
    :cols="slotProps.cols"
    :rows="rows"
    @update-advanced-filters="emit('updateAdvancedFilters', $event)"
    @sort-by="emit('sortBy', $event)"
  />
</template>
<script setup>
import KTableHeaderAdvancedFilters from "./KTableHeaderAdvancedFilters.vue";
// ================================================
// ================ GLOBAL IMPORTS ================
// ================================================

import { ref, watch } from "vue";

const props = defineProps({
  /** */
  props: {
    type: Object,
    required: true,
  },
  /** */
  showAdvancedFilters: Boolean,
  /** */
  rows: {
    type: Array,
    required: true,
  },
  /** Defines the starting state of the table to be displayed in the header of the table */
  startFiltered: {
    type: Array,
    required: false,
    default: () => [],
  },
  /** Defines the selection mode of the table */
  action: {
    type: {
      selection: "single" | "multiple" | "none",
      actionSelectionRules: Function,
    },
    required: true,
  },
  selection: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["sortBy", "updateAdvancedFilters"]);

// =========================================================
// ================ Header SLOT MADE REACTIVE ================
// =========================================================

const slotProps = ref({
  cols: [
    {
      name: "",
      label: "",
      required: true,
      sortable: true,
      align: "",
      editable: false,
      type: "",
      __iconClass: "",
      __thClass: "",
    },
  ],
});

watch(
  () => props.props,
  (first) => {
    slotProps.value = first;
  }
);

// ===============================================================
// ================ AdvancedFilters MADE REACTIVE ================
// ===============================================================

const advancedFilters = defineModel("advancedFilters", { type: Object });
</script>

<style>
.advancedFilter__q-select .q-field__control-container > .q-field__native {
  overflow: auto;
}
.tableHeader__label {
  text-align: left;
}

.tableHeader__label[align="number"],
.tableHeader__label[align="decimal"] {
  justify-content: flex-start;
  flex-direction: row-reverse;
  padding-right: 8px;
  text-align: right;
}

.arrowSort[align="number"],
.arrowSort[align="decimal"] {
  margin-right: 0.5rem;
}
</style>
