<template>
  <section class="space-y-4">
    <nav
      v-if="displayCategoryTabs"
      class="tabs tabs-boxed inline-flex"
      role="tablist"
      aria-label="Catégories"
    >
      <button
        v-for="option in categories"
        :key="option.value"
        type="button"
        class="tab"
        :class="{ 'tab-active': option.value === category }"
        role="tab"
        :aria-selected="option.value === category"
        @click="emit('update:category', option.value)"
      >
        {{ option.label }}
      </button>
    </nav>

    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
        <label class="input input-bordered flex items-center gap-2 w-full sm:w-72" :aria-busy="loading">
          <IconLucideSearch class="w-4 h-4" aria-hidden="true" />
          <input
            :value="search"
            type="search"
            class="grow min-w-0"
            placeholder="Rechercher par nom…"
            autocomplete="off"
            @input="onSearch"
          />
        </label>

        <div class="flex items-center gap-2">
          <label class="text-sm font-medium text-base-content/70" for="model-type-sort">Trier par</label>
          <select
            id="model-type-sort"
            class="select select-bordered select-sm"
            :value="sort"
            @change="emit('update:sort', ($event.target as HTMLSelectElement).value as SortField)"
          >
            <option value="name">Nom</option>
            <option value="createdAt">Date de création</option>
          </select>
        </div>

        <div class="flex items-center gap-2">
          <label class="text-sm font-medium text-base-content/70" for="model-type-dir">Ordre</label>
          <select
            id="model-type-dir"
            class="select select-bordered select-sm"
            :value="dir"
            @change="emit('update:dir', ($event.target as HTMLSelectElement).value as SortDirection)"
          >
            <option value="asc">Ascendant</option>
            <option value="desc">Descendant</option>
          </select>
        </div>
      </div>

      <button
        type="button"
        class="btn btn-primary self-start"
        :disabled="loading"
        @click="emit('create')"
      >
        <IconLucidePlus class="w-4 h-4" aria-hidden="true" />
        Créer
      </button>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import IconLucidePlus from '~icons/lucide/plus';
import IconLucideSearch from '~icons/lucide/search';
import type { ModelCategory } from '~/services/modelTypes';

type SortField = 'name' | 'createdAt';
type SortDirection = 'asc' | 'desc';

const props = defineProps<{
  category: ModelCategory;
  search: string;
  sort: SortField;
  dir: SortDirection;
  loading?: boolean;
  showCategoryTabs?: boolean;
  canEdit?: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:category', value: ModelCategory): void;
  (e: 'update:search', value: string): void;
  (e: 'update:sort', value: SortField): void;
  (e: 'update:dir', value: SortDirection): void;
  (e: 'create'): void;
}>();

const categories: Array<{ label: string; value: ModelCategory }> = [
  { label: 'Composants', value: 'COMPONENT' },
  { label: 'Pièces', value: 'PIECE' },
  { label: 'Produits', value: 'PRODUCT' },
];

const onSearch = (event: Event) => {
  emit('update:search', (event.target as HTMLInputElement).value);
};

const loading = computed(() => props.loading ?? false);
const displayCategoryTabs = computed(() => props.showCategoryTabs ?? true);
</script>
