// __tests__/components/pois/AddPoiModalWindow.test.js

import React from "react";
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
import "@testing-library/jest-dom";
import AddPoiModalWindow from "../../../components/pois/AddPoiModalWindow";
import { RecoilRoot } from "recoil";

// Mock für die fetch-Funktion
global.fetch = jest.fn((url) => {
  if (url === "/api/talas_v5_DB/poiTyp/readPoiTyp") {
    return Promise.resolve({
      json: () => Promise.resolve([{ idPoiTyp: "1", name: "Type1" }]),
    });
  } else if (url === "/api/talas5/location_device") {
    return Promise.resolve({
      json: () => Promise.resolve([{ idLD: "1", name: "Device1" }]),
    });
  } else if (url === "/api/talas_v5_DB/pois/addLocation") {
    return Promise.resolve({ ok: true });
  }
});

describe("AddPoiModalWindow", () => {
  const mockOnClose = jest.fn();
  const mockMap = {
    closePopup: jest.fn(),
  };
  const mockLatLng = { lat: 52.52, lng: 13.405 };

  // Mock window.location.reload
  beforeAll(() => {
    Object.defineProperty(window, "location", {
      value: {
        ...window.location,
        reload: jest.fn(),
      },
      writable: true,
    });
  });

  beforeEach(() => {
    fetch.mockClear();
    window.location.reload.mockClear(); // Clear the mock before each test
  });

  test("renders correctly and allows form submission", async () => {
    await act(async () => {
      render(
        <RecoilRoot>
          <AddPoiModalWindow onClose={mockOnClose} map={mockMap} latlng={mockLatLng} />
        </RecoilRoot>
      );
    });

    // Überprüfen, ob die Formularelemente gerendert werden
    expect(screen.getByLabelText(/Name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Gerät/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Typ/i)).toBeInTheDocument();
    expect(screen.getByText(/Lat/i)).toHaveTextContent(`Lat : ${mockLatLng.lat.toFixed(5)}`);
    expect(screen.getByText(/Lng/i)).toHaveTextContent(`Lng : ${mockLatLng.lng.toFixed(5)}`);

    // Simulieren der Eingabe in das Namensfeld
    fireEvent.change(screen.getByLabelText(/Name/i), { target: { value: "New POI" } });
    expect(screen.getByLabelText(/Name/i)).toHaveValue("New POI");

    // Simulieren der Auswahl eines Geräts
    fireEvent.change(screen.getByLabelText(/Gerät/i), { target: { value: "Device1" } });
    expect(screen.getByLabelText(/Gerät/i)).toHaveValue("Device1");

    // Simulieren der Auswahl eines Typs
    fireEvent.change(screen.getByLabelText(/Typ/i), { target: { value: "1" } });
    expect(screen.getByLabelText(/Typ/i)).toHaveValue("1");

    // Simulieren des Formulareingabeverfahrens
    fireEvent.submit(screen.getByRole("button", { name: /POI hinzufügen/i }));

    // Warten auf die Formulareinreichung und Überprüfen der Ergebnisse
    await waitFor(() => {
      expect(mockOnClose).toHaveBeenCalled();
      expect(mockMap.closePopup).toHaveBeenCalled();
      expect(fetch).toHaveBeenCalledWith("/api/talas_v5_DB/pois/addLocation", expect.any(Object));
      expect(window.location.reload).toHaveBeenCalled(); // Verify that reload was called
    });
  });
});