/**
 * DESIGN (Rennmaus Filter.html): Quick-Chips-Filter der Rennmäuse-Liste.
 *
 * Eine Pillen-Reihe (Status / Geschlecht / Farbschlag / Herkunft) öffnet je ein
 * Bottom-Sheet mit Mehrfachauswahl; gewählte Werte erscheinen als entfernbare
 * Chips, „Alle löschen" setzt zurück. Mobile-first; identisches Verhalten auf Desktop.
 */
import { de, expect, gotoSection, selectListFilter, skipUnlessMock, test } from './fixtures'

const t = de.pages.gerbils

test.describe('Quick-Chips-Filter – Rennmäuse-Liste', () => {
  test('Kategorie-Pillen sind sichtbar', async ({ page }) => {
    skipUnlessMock()
    await gotoSection(page, de.nav.gerbils)
    await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()

    const quickrow = page.locator('.rmf-quickrow')
    await expect(quickrow.getByRole('button', { name: t.filters.status })).toBeVisible()
    await expect(quickrow.getByRole('button', { name: t.filters.gender })).toBeVisible()
    await expect(quickrow.getByRole('button', { name: t.filters.colorVariety })).toBeVisible()
    await expect(quickrow.getByRole('button', { name: t.fields.origin })).toBeVisible()
  })

  test('Mehrfachauswahl erzeugt entfernbare Chips, „Alle löschen" setzt zurück', async ({
    page,
  }) => {
    skipUnlessMock()
    await gotoSection(page, de.nav.gerbils)

    // Default: Zucht-Chip ist aktiv.
    await expect(page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding })).toBeVisible()

    // Geschlecht = männlich über das Sheet wählen → zweiter Chip erscheint.
    await selectListFilter(page, t.filters.gender, t.genderLabels.male)
    await expect(page.locator('.rmf-chip-val', { hasText: t.genderLabels.male })).toBeVisible()

    // „Alle löschen" entfernt sämtliche Chips.
    await page.getByRole('button', { name: de.filterBar.clearAll }).click()
    await expect(page.locator('.rmf-chip')).toHaveCount(0)
  })

  test('Einzelner Chip lässt sich per Klick entfernen', async ({ page }) => {
    skipUnlessMock()
    await gotoSection(page, de.nav.gerbils)

    const breedingChip = page.locator('.rmf-chip', {
      has: page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding }),
    })
    await expect(breedingChip).toBeVisible()
    await breedingChip.click()
    await expect(breedingChip).toHaveCount(0)
  })
})