/**
 * Regression: die Tag/Nacht-Umschaltung blieb wirkungslos.
 *
 * Jeder Aufruf von `useTheme()` legte bis 2026-08-31 sein eigenes `useState`
 * an. Der Schalter in den Einstellungen änderte damit nur seine eigene Kopie;
 * die Kopie in `App.tsx`, die `data-theme` setzt, blieb stehen — sichtbar
 * wurde die Wahl erst nach einem Neustart der App. Die uebrigen Schalter
 * hatten denselben Fehler.
 *
 * Der Test stellt genau diese Konstellation nach: zwei getrennte Komponenten,
 * eine schaltet, die andere zeigt an.
 */

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

import { useTabBeschriftung, useTheme } from "./theme"

function Anzeige() {
  const [theme] = useTheme()
  const [beschriftung] = useTabBeschriftung()
  return (
    <div>
      <span data-testid="theme">{theme}</span>
      <span data-testid="beschriftung">{beschriftung ? "an" : "aus"}</span>
    </div>
  )
}

function Schalter() {
  const [theme, setzeTheme] = useTheme()
  const [beschriftung, setzeBeschriftung] = useTabBeschriftung()
  return (
    <div>
      <button onClick={() => setzeTheme(theme === "nacht" ? "tag" : "nacht")}>Thema</button>
      <button onClick={() => setzeBeschriftung(!beschriftung)}>Beschriftung</button>
    </div>
  )
}

describe("Ansichtseinstellungen, geteilt zwischen Komponenten", () => {
  beforeEach(() => {
    localStorage.clear()
  })

  it("die Themenwahl der einen Komponente erreicht die andere", () => {
    render(
      <>
        <Anzeige />
        <Schalter />
      </>,
    )
    const vorher = screen.getByTestId("theme").textContent

    fireEvent.click(screen.getByText("Thema"))

    expect(screen.getByTestId("theme").textContent).not.toBe(vorher)
  })

  it("der Beschriftungs-Schalter der einen Komponente erreicht die andere", () => {
    render(
      <>
        <Anzeige />
        <Schalter />
      </>,
    )
    const vorher = screen.getByTestId("beschriftung").textContent

    fireEvent.click(screen.getByText("Beschriftung"))

    expect(screen.getByTestId("beschriftung").textContent).not.toBe(vorher)
  })
})