<!-- Модалка фильтра (видео и модели): вкладки групп + быстрые фильтры -->
<template>
  <UiPopup
    v-if="model"
    v-model="model"
    drawer
    class="filter-popup"
  >
    <template #title>
      <div class="filter-popup__title-wrapper">
        {{ title ?? t('filter') }}
        <span
          v-if="activeCount"
          class="filter-popup__active"
        >{{ t('filter_popup.active_count', { count: activeCount }) }}</span>
      </div>
    </template>

    <div
      :class="{ '_loading': loading }"
      class="filter-popup__content"
    >
      <div
        v-if="activeChips && activeChips.length > 0"
        class="filter-popup__active-filters"
      >
        <span class="filter-popup__active-filters-title">{{ t('filter_popup.active_title') }}</span>
        <div class="filter-popup__active-chips">
          <UiChips
            v-for="(chip, index) in activeChips"
            :key="`s-filter-popup-active-${index}`"
            :index="`s-filter-popup-chips-${index}`"
            :item="chip"
            class="filter-popup__chips"
            with-close
            @click="$emit('chip-click', chip)"
          />
        </div>
      </div>

      <div
        v-if="quick && quick.length > 0"
        class="filter-popup__quick"
      >
        <span class="filter-popup__quick-title">{{ t('filter_popup.quick_title') }}</span>
        <div class="filter-popup__grid">
          <template
            v-for="(item, index) in quick"
            :key="`quick-${index}`"
          >
            <slot
              :item="item"
              :index="index"
              name="quick-field"
            >
              <UiSelect
                :name="(item as any).name"
                :model-value="(item as any).value"
                :items="(item as any).items"
                :is-first-placeholder="modelsPage"
                :active="(item as any).active"
                :label="(item as any).label ?? (item as any).title"
                :label-icon="(item as any).icon ? { icon: (item as any).icon, prefix: (item as any).iconPrefix ?? (modelsPage ? 'models' : 'categories') } : undefined"
                :placeholder="(item as any).placeholder"
                separator-before="unspecified"
                class="filter-popup__select"
                size="s"
                @update:model-value="val => $emit('field-update', { name: (item as any).name, value: val })"
              />
            </slot>
          </template>
        </div>
      </div>

      <details
        v-for="(group, groupIndex) in groups"
        :key="`group-${groupIndex}`"
        class="filter-popup__group"
      >
        <summary class="filter-popup__summary">
          <UiIcon
            name="angle-right"
            size="16"
            class="filter-popup__summary-arrow"
          />
          <span class="filter-popup__summary-title">{{ group.title }}</span>
          <span class="filter-popup__summary-count">{{ t('filter_popup.fields', { count: group.count ?? group.fields.length }) }}</span>
          <span
            v-if="group.description"
            class="filter-popup__summary-description"
          >{{ group.description }}</span>
        </summary>
        <div class="filter-popup__group-content">
          <template
            v-for="(field, fieldIndex) in group.fields"
            :key="`field-${groupIndex}-${fieldIndex}`"
          >
            <slot
              :field="field"
              :group="group"
              :index="fieldIndex"
              name="field"
            >
              <UiSelect
                :name="(field as any).name"
                :model-value="(field as any).value"
                :items="(field as any).items"
                :active="(field as any).active"
                :label="(field as any).label ?? (field as any).title"
                :label-icon="(field as any).icon ? { icon: (field as any).icon, prefix: (field as any).iconPrefix ?? (modelsPage ? 'models' : 'categories') } : undefined"
                :placeholder="(field as any).placeholder"
                class="filter-popup__select"
                size="s"
                @update:model-value="val => $emit('field-update', { name: (field as any).name, value: val })"
              />
            </slot>
          </template>
        </div>
      </details>
    </div>

    <template #footer>
      <slot name="footer"/>
    </template>
  </UiPopup>
</template>

<script setup lang="ts" generic="TField">
import type { IChipsItem } from '../../types';

export interface FilterGroup<T> {
  key: string
  title: string
  description?: string
  count?: number
  fields: T[]
}

defineProps<{
  title?: string
  activeCount?: number
  activeChips?: IChipsItem[]
  quick?: TField[]
  groups?: FilterGroup<TField>[]
  loading?: boolean
  modelsPage?: boolean
}>();

defineEmits<{
  (e: 'chip-click', item: IChipsItem): void
  (e: 'field-update', payload: { name: string, value: any }): void
}>();

const model = defineModel<boolean>();

const { t } = useI18n();
</script>

<style lang="scss">
.filter-popup__buttons {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.filter-popup__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.filter-popup__title-wrapper {
  display: flex;
  column-gap: 12px;
  align-items: center;
  font-weight: 600;
}

.filter-popup__active {
  @include font-xs;

  color: $filter-popup--active;
  background-color: $filter-popup-active-bg;
  padding: 2px 10px;
  border-radius: $radius-full;
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
}

.filter-popup__fixed-filters {
  padding: 8px;

  @include from-br(sm) {
    padding: 16px;
    border-bottom: 1px solid $filter-popup-border;
  }
}

.filter-popup__tabs {
  @include from-br(sm) {
    max-width: 400px;
    margin: 0 auto;
  }
}

.filter-popup__quick {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid $filter-popup-main-border;
}

.filter-popup__active-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.filter-popup__active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-chips.filter-popup__chips {
  @include font-sm;

  border-radius: $radius-lg;
  border: 1px solid $filter-popup-active-chip-border;
  background-color: $filter-popup-active-chip-bg;
  color: $filter-popup-active-chip-text;
  pointer-events: all;

  @include hover(background-color) {
    background-color: $filter-popup-active-chip-bg--hover;
  }
}

.ui-chips.filter-popup__chips .ui-chips__close {
  pointer-events: all;
  color: $filter-popup-active-chip-close;
}

.filter-popup__active-filters-title,
.filter-popup__quick-title {
  @include font-xs;

  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: $filter-popup-quick-title;
}

.filter-popup__grid {
  display: grid;
  column-gap: 12px;
  row-gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.filter-popup__select .ui-select__wrapper {
  margin-top: auto;
}

.filter-popup__group {
  border-bottom: 1px solid $filter-popup-group-border;
}

.filter-popup__group[open] .filter-popup__summary-arrow {
  transform: rotate(90deg);
}

.filter-popup__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;

  &::-webkit-details-marker {
    display: none;
  }
}

.filter-popup__summary-arrow {
  flex-shrink: 0;
  color: $filter-popup-summary-arrow;
  transition: transform var(--transition);
}

.filter-popup__summary-title {
  @include font-base;

  font-weight: 600;
}

.filter-popup__summary-count {
  @include font-xs;

  color: $filter-popup--active;
  background-color: $filter-popup-active-bg;
  padding: 2px 10px;
  border-radius: $radius-full;
  font-weight: 500;
  white-space: nowrap;
}

.filter-popup__summary-description {
  @include font-sm;

  text-align: right;
  margin-left: auto;
  color: $filter-popup-summary-description;
}

.filter-popup__group-content {
  display: grid;
  grid-auto-flow: dense;
  column-gap: 12px;
  row-gap: 16px;
  padding-bottom: 16px;
  grid-template-columns: 1fr 1fr;
}

.filter-popup__group-content > *:not(.ui-select) {
  grid-column: 1 / -1;
}

.filter-popup__loading {
  min-height: 200px;
}
</style>
