// __tests__/components/pois/PoiUpdateModal.test.js

import React from "react";
import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
import "@testing-library/jest-dom";
import PoiUpdateModal from "../../../components/pois/PoiUpdateModal";
import { useRecoilValue } from "recoil";
import { selectedPoiState, currentPoiState } from "../../../store/atoms/poiState";

// Mock the recoil states
jest.mock("recoil");

describe("PoiUpdateModal", () => {
  const mockOnClose = jest.fn();
  const mockOnSubmit = jest.fn();
  const poiDataMock = {
    idPoi: "123",
    name: "Test POI",
    description: "Test Description",
    idPoiTyp: "1",
    idLD: "2",
  };

  const selectedPoiMock = {
    idPoi: "123",
    typ: "Type1",
  };

  const currentPoiMock = {
    idLD: "2",
  };

  beforeEach(() => {
    useRecoilValue.mockImplementation((state) => {
      if (state === selectedPoiState) return selectedPoiMock;
      if (state === currentPoiState) return currentPoiMock;
    });

    mockOnClose.mockClear();
    mockOnSubmit.mockClear();

    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/talas_v5_DB/locationDevice/locationDevices") {
        return Promise.resolve({
          json: () => Promise.resolve([{ id: "2", name: "Device1" }]),
        });
      } else if (url.startsWith("/api/talas_v5_DB/locationDevice/getDeviceId")) {
        return Promise.resolve({
          json: () => Promise.resolve({ idLD: "2", name: "Device1" }),
        });
      } else if (url.startsWith("/api/talas_v5_DB/pois/deletePoi")) {
        return Promise.resolve({ ok: true });
      } else if (url === "/api/talas_v5_DB/pois/updatePoi") {
        return Promise.resolve({ ok: true });
      }
    });

    global.alert = jest.fn(); // Mock alert
    delete window.location;
    window.location = { reload: jest.fn() }; // Mock location.reload
  });

  test("renders modal with correct data", async () => {
    await act(async () => {
      render(<PoiUpdateModal onClose={mockOnClose} poiData={poiDataMock} onSubmit={mockOnSubmit} />);
    });

    expect(screen.getByDisplayValue("Test Description")).toBeInTheDocument();
    expect(screen.getByDisplayValue("Device1")).toBeInTheDocument();
    expect(screen.getByDisplayValue("Type1")).toBeInTheDocument();
  });

  test("handles POI update submission", async () => {
    await act(async () => {
      render(<PoiUpdateModal onClose={mockOnClose} poiData={poiDataMock} onSubmit={mockOnSubmit} />);
    });

    fireEvent.change(screen.getByLabelText("Beschreibung:"), { target: { value: "Updated Description" } });
    fireEvent.click(screen.getByText("POI aktualisieren"));

    await waitFor(() => {
      expect(global.fetch).toHaveBeenCalledWith("/api/talas_v5_DB/pois/updatePoi", expect.any(Object));
      expect(mockOnClose).toHaveBeenCalledTimes(1);
    });
  });

  test("handles POI deletion", async () => {
    window.confirm = jest.fn().mockImplementation(() => true); // Mock confirm dialog to always accept

    await act(async () => {
      render(<PoiUpdateModal onClose={mockOnClose} poiData={poiDataMock} onSubmit={mockOnSubmit} />);
    });

    fireEvent.click(screen.getByText("POI löschen"));

    await waitFor(() => {
      expect(global.fetch).toHaveBeenCalledWith(expect.stringContaining("/api/talas_v5_DB/pois/deletePoi"), { method: "DELETE" });
      expect(mockOnClose).toHaveBeenCalledTimes(1);
      expect(window.location.reload).toHaveBeenCalledTimes(1);
      expect(global.alert).toHaveBeenCalledWith("POI wurde erfolgreich gelöscht.");
    });
  });

  test("closes the modal when the close button is clicked", async () => {
    await act(async () => {
      render(<PoiUpdateModal onClose={mockOnClose} poiData={poiDataMock} onSubmit={mockOnSubmit} />);
    });

    fireEvent.click(screen.getByLabelText("Close"));

    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });
});