import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import { RecoilRoot } from "recoil";
import MapComponent from "./MapComponent";
import { mapLayersState } from "../store/atoms/mapLayersSlice";
import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleSlice";
import "@testing-library/jest-dom";

describe("MapComponent - TK-Komponenten Tests", () => {
  test("TK-Komponenten sind sichtbar, wenn Checkbox aktiviert ist", () => {
    // Initialisiere die Recoil-Atoms
    const mockState = {
      TKKomponenten: true, // TK-Komponenten sichtbar
    };

    render(
      <RecoilRoot initializeState={({ set }) => set(mapLayersState, mockState)}>
        <MapComponent />
      </RecoilRoot>
    );

    // Stelle sicher, dass die TK-Komponenten sichtbar sind
    const tkLayer = screen.getByText(/TK-Komponenten/i);
    expect(tkLayer).toBeInTheDocument();
  });

  test("TK-Komponenten werden ausgeblendet, wenn Checkbox deaktiviert wird", () => {
    const mockState = {
      TKKomponenten: true, // Initial sichtbar
    };

    render(
      <RecoilRoot initializeState={({ set }) => set(mapLayersState, mockState)}>
        <MapComponent />
      </RecoilRoot>
    );

    // Simuliere die Checkbox-Interaktion
    const checkbox = screen.getByRole("checkbox", { name: /TK-Komponenten/i });
    fireEvent.click(checkbox); // Deaktiviert die Sichtbarkeit

    // Erwartung: TK-Komponenten sind nicht sichtbar
    expect(checkbox.checked).toBe(false);
  });
});