<!-- Одно поле фильтра моделей (слайдер/селект/радио) с поддержкой единиц роста -->
<template>
  <FilterSlider
    v-if="field.kind === 'range'"
    :item="field"
    :group-name="field.group.name"
    :index="index"
    :query="pendingQuery"
    :icon="(field as any).icon"
    class="filter-model-field__slider"
    icon-prefix="models"
    @update:query="$emit('update:pending-query', $event)"
  >
    <template
      v-if="isHeight"
      #title-append
    >
      <UiSegmented
        :class="{'_hidden': !field.show_on_form}"
        :items="unitItems"
        :model-value="units"
        class="filter-model-field__units"
        small
        @update:model-value="$emit('update:units', $event)"
      />
    </template>
  </FilterSlider>
  <UiSelect
    v-else-if="field.kind === 'select'"
    :class="{'_hidden': !field.show_on_form}"
    :name="field.name"
    :model-value="currentValue"
    :items="selectItems"
    :active="isActive"
    :label="field.title"
    :label-icon="(field as any).icon ? { icon: (field as any).icon, prefix: 'models' } : undefined"
    class="filter-model-field__select"
    size="s"
    is-first-placeholder
    @update:model-value="onUpdate"
  />
  <UiSegmented
    v-else-if="field.kind === 'radio'"
    :class="{'_hidden': !field.show_on_form}"
    :items="radioItems"
    :title="field.title"
    :icon="(field as any).icon"
    :model-value="currentValue"
    class="filter-model-field__radio"
    icon-prefix="models"
    @update:model-value="onUpdate"
  />
</template>

<script setup lang="ts">
import type { IModelFilter } from '../../types';
import type { LocationQuery } from '#vue-router';
import { sortFilterRadioOptions } from '../../utils/sort-filter-radio-options';

const HEIGHT_FILTER_NAMES = ['height_cm', 'height_in'];

const props = defineProps<{
  field: IModelFilter
  index: number
  pendingQuery: LocationQuery
  units: string
  unitItems: { name: string, title: string, quantity: number }[]
}>();

const emit = defineEmits<{
  (e: 'update:pending-query', value: LocationQuery): void
  (e: 'update:units', value: string): void
}>();

const isHeight = computed(() => HEIGHT_FILTER_NAMES.includes(props.field.name));

const selectItems = computed(() =>
  props.field.options.map(option => ({
    value: option.name,
    title: `${option.title} (${option.quantity})`,
  })),
);

const radioItems = computed(() => sortFilterRadioOptions(props.field.options));

const currentValue = computed<string>(() => {
  const raw = props.pendingQuery[`filter_${props.field.name}`];
  if (raw) return String(raw);
  return props.field.options[0]?.name ?? '';
});

const isActive = computed(() => {
  const base = props.field.name.replace(/_(from|to)$/, '');
  return Object.keys(props.pendingQuery).some(key => key.startsWith(`filter_${base}`));
});

function onUpdate(val: string) {
  const next = { ...props.pendingQuery };
  if (!val || val === 'all') {
    delete next[`filter_${props.field.name}`];
  } else {
    next[`filter_${props.field.name}`] = val;
  }
  emit('update:pending-query', next);
}
</script>
