<script setup>
import {
  isDateColumn,
  isBooleanColumn,
  isSelectColumn,
  isMultiSelectColumn,
  getOperatorOptionsForColumn,
  getBooleanValueOptionsForColumn,
  getSelectValueOptionsForColumn,
} from "../../composables/useDataTableFilters.js";

const props = defineProps({
  visible: { type: Boolean, default: false },
  columns: { type: Array, default: () => [] },
  filterRows: { type: Array, default: () => [] },
  filterableColumns: { type: Array, default: () => [] },
  tableError: { type: String, default: null },
  getAvailableColumnsForRow: { type: Function, required: true },
});

const emit = defineEmits([
  "update:visible",
  "add-filter",
  "remove-filter",
  "update:column-key",
  "update:operator",
  "update:value",
  "update:date-model",
  "reset",
]);

function colDef(key) {
  return props.columns.find((c) => c.key === key) || null;
}
</script>

<template>
  <Drawer
    :visible="visible"
    position="right"
    header="Filters"
    class="w-full! sm:w-85! b2c-filter-drawer"
    @update:visible="emit('update:visible', $event)"
  >
    <div class="b2c-filter-drawer-inner flex flex-col h-full">
      <Message
        v-if="tableError"
        severity="error"
        class="b2c-filter-error w-full shrink-0 mb-4 text-sm"
        :closable="false"
      >
        {{ tableError }}
      </Message>
      <div
        class="b2c-filter-drawer-content flex-1 min-h-0 overflow-y-auto flex flex-col gap-3"
      >
        <template v-if="filterableColumns.length">
          <div
            v-for="row in filterRows"
            :key="row.id"
            class="b2c-filter-block border border-round surface-border p-2 flex flex-col gap-2"
          >
            <div class="flex align-items-center gap-2">
              <Select
                :model-value="row.columnKey"
                :options="getAvailableColumnsForRow(row.id)"
                option-label="header"
                option-value="key"
                placeholder="Kolom"
                class="flex-1 min-w-0"
                size="small"
                @update:model-value="emit('update:column-key', row.id, $event)"
              />
              <Button
                icon="pi pi-times"
                rounded
                outlined
                severity="secondary"
                size="small"
                aria-label="Verwijder filter"
                class="shrink-0"
                @click="emit('remove-filter', row.id)"
              />
            </div>
            <div v-if="row.columnKey" class="flex flex-col gap-2">
              <Select
                v-if="
                  !isDateColumn(colDef(row.columnKey)) &&
                  !isBooleanColumn(colDef(row.columnKey))
                "
                :model-value="row.op"
                :options="getOperatorOptionsForColumn(colDef(row.columnKey))"
                option-label="label"
                option-value="value"
                placeholder="Operator"
                class="w-full min-w-0"
                size="small"
                @update:model-value="emit('update:operator', row.id, $event)"
              />
              <BaseDatePicker
                v-else-if="isDateColumn(colDef(row.columnKey))"
                :model-value="row.dateModel ?? null"
                selection-mode="range"
                placeholder="Datum of periode"
                class="w-full min-w-0"
                size="small"
                @update:model-value="emit('update:date-model', row.id, $event)"
              />
              <Select
                v-if="isBooleanColumn(colDef(row.columnKey))"
                :model-value="row.value"
                :options="
                  getBooleanValueOptionsForColumn(colDef(row.columnKey))
                "
                option-label="label"
                option-value="value"
                placeholder="Waarde"
                class="w-full min-w-0"
                size="small"
                @update:model-value="emit('update:value', row.id, $event)"
              />
              <BaseMultiSelect
                v-else-if="
                  isSelectColumn(colDef(row.columnKey)) &&
                  isMultiSelectColumn(colDef(row.columnKey))
                "
                :model-value="Array.isArray(row.value) ? row.value : []"
                :options="getSelectValueOptionsForColumn(colDef(row.columnKey))"
                option-label="label"
                option-value="value"
                placeholder="Waarden"
                filter
                display="chip"
                :max-selected-labels="1"
                selected-items-label="{0} geselecteerd"
                @update:model-value="emit('update:value', row.id, $event)"
              />
              <Select
                v-else-if="isSelectColumn(colDef(row.columnKey))"
                :model-value="
                  Array.isArray(row.value) ? (row.value[0] ?? '') : row.value
                "
                :options="getSelectValueOptionsForColumn(colDef(row.columnKey))"
                option-label="label"
                option-value="value"
                placeholder="Waarde"
                class="w-full min-w-0"
                size="small"
                @update:model-value="emit('update:value', row.id, $event)"
              />
            </div>
            <InputText
              v-if="
                !row.columnKey ||
                (!isDateColumn(colDef(row.columnKey)) &&
                  !isBooleanColumn(colDef(row.columnKey)) &&
                  !isSelectColumn(colDef(row.columnKey)))
              "
              :model-value="row.value"
              placeholder="Waarde"
              class="w-full"
              size="small"
              @update:model-value="emit('update:value', row.id, $event)"
            />
          </div>
          <Button
            label="Add filter"
            icon="pi pi-plus"
            severity="secondary"
            outlined
            size="small"
            @click="emit('add-filter')"
          />
        </template>
        <p v-else class="text-sm text-surface-500 m-0">
          Geen filterbare kolommen
        </p>
      </div>
      <div
        class="b2c-filter-drawer-footer shrink-0 border-t border-surface-200 surface-ground pt-4 mt-4"
      >
        <Button
          label="Reset"
          icon="pi pi-refresh"
          severity="secondary"
          outlined
          size="small"
          class="w-full"
          @click="emit('reset')"
        />
      </div>
    </div>
  </Drawer>
</template>
