// __tests__/components/DataSheet.test.js
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";
import DataSheet from "../../components/DataSheet";
import { RecoilRoot } from "recoil";
import * as Recoil from "recoil";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState";
import { gisSystemStaticState } from "../../store/atoms/gisSystemState";
import { mapLayersState } from "../../store/atoms/mapLayersState";
import { selectedAreaState } from "../../store/atoms/selectedAreaState";
import { zoomTriggerState } from "../../store/atoms/zoomTriggerState";
import { poiLayerVisibleState } from "../../store/atoms/poiLayerVisibleState";

// Stelle sicher, dass alle notwendigen Atome korrekt gemockt sind
jest.mock("../../store/atoms/gisStationState", () => ({
  gisStationState: {
    subscribe: jest.fn(),
    getSnapshot: jest.fn(() => []), // Mocked return value
  },
}));

jest.mock("../../store/atoms/gisSystemState", () => ({
  gisSystemStaticState: {
    subscribe: jest.fn(),
    getSnapshot: jest.fn(() => []), // Mocked return value
  },
}));

describe("DataSheet Component", () => {
  //--------------------------------------------------------------------------------
  it("renders the basic fields and initial station/system listings", async () => {
    render(
      <RecoilRoot>
        <DataSheet />
      </RecoilRoot>
    );

    // Waiting for asynchronous tasks to complete
    await waitFor(() => {
      // Check if the specific elements are present after data processing
      expect(screen.getByRole("combobox")).toBeInTheDocument();
      expect(screen.getByLabelText("POIs")).toBeInTheDocument();
      expect(screen.getByRole("option", { name: "Station wählen" })).toBeInTheDocument();
    });

    // Optionally print out the full DOM for debugging
    screen.debug();
  });
  //--------------------------------------------------------------------------------
  test("should open dropdown on click", async () => {
    render(
      <RecoilRoot>
        <DataSheet />
      </RecoilRoot>
    );
    const combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    // Überprüfe, ob die Dropdown-Optionen angezeigt werden
    expect(screen.getByRole("option", { name: "Station wählen" })).toBeInTheDocument();
  });

  //--------------------------------------------------------------------------------
  test("should toggle checkbox", async () => {
    render(
      <RecoilRoot>
        <DataSheet />
      </RecoilRoot>
    );
    const checkbox = screen.getByLabelText("POIs");
    // Stelle sicher, dass die Checkbox nicht angekreuzt ist
    expect(checkbox).not.toBeChecked();
    // Klicke auf die Checkbox
    userEvent.click(checkbox);
    // Jetzt sollte sie angekreuzt sein
    expect(checkbox).toBeChecked();
  });

  //--------------------------------------------------------------------------------
});