/**
 * Abnahmekriterien aus Phase 5 des Umsetzungsplans: Die App muss beide
 * Layouts beherrschen und die Zurück-Navigation über die ZURUECK-Tabelle
 * korrekt auflösen.
 */

import { fireEvent, render, screen } from "@testing-library/react"
import { beforeEach, describe, expect, it, vi } from "vitest"

import { Shell } from "./Shell"
import { bereichVon } from "./navigation"
import { bildschirmbreiteSetzen } from "./tests/aufbau"

function rahmen(routeName: Parameters<typeof bereichVon>[0], geheZu = vi.fn()) {
  render(
    <Shell route={{ name: routeName }} geheZu={geheZu} tabBeschriftung>
      <p>Inhalt</p>
    </Shell>,
  )
  return geheZu
}

describe("Shell", () => {
  beforeEach(() => {
    bildschirmbreiteSetzen(390)
  })

  it("zeigt auf schmalen Bildschirmen die Tab-Leiste unten", () => {
    const { container } = render(
      <Shell route={{ name: "home" }} geheZu={vi.fn()} tabBeschriftung>
        <p>Inhalt</p>
      </Shell>,
    )
    expect(container.querySelector(".ads-tabbar")).not.toBeNull()
    expect(container.querySelector(".dm-seitenleiste")).toBeNull()
  })

  it("zeigt auf breiten Bildschirmen die Seitenleiste statt der Tab-Leiste", () => {
    bildschirmbreiteSetzen(1280)
    const { container } = render(
      <Shell route={{ name: "home" }} geheZu={vi.fn()} tabBeschriftung>
        <p>Inhalt</p>
      </Shell>,
    )
    expect(container.querySelector(".dm-seitenleiste")).not.toBeNull()
    expect(container.querySelector(".ads-tabbar")).toBeNull()
  })

  it("führt der Zurück-Pfeil zur übergeordneten Seite", () => {
    const geheZu = rahmen("beitrag")
    fireEvent.click(screen.getByLabelText("Zurück"))
    // beitrag -> vers laut ZURUECK-Tabelle
    expect(geheZu).toHaveBeenCalledWith("vers")
  })

  it("blendet den Zurück-Pfeil auf Hauptbereichen aus", () => {
    rahmen("trips")
    expect(screen.queryByLabelText("Zurück")).toBeNull()
  })

  it("hebt den Hauptbereich hervor, zu dem eine Unterseite gehört", () => {
    // schutz -> vertragsdetails -> vers -> audi
    expect(bereichVon("schutz")).toBe("audi")
    expect(bereichVon("fill")).toBe("fuel")
    expect(bereichVon("trip")).toBe("trips")
  })

  it("erreicht die Einstellungen über die Ringe, nicht über die Tab-Leiste", () => {
    const geheZu = rahmen("home")
    fireEvent.click(screen.getByLabelText("Einstellungen"))
    expect(geheZu).toHaveBeenCalledWith("einst")
  })
})