// __tests__/components/pois/PoiUpdateModalWrapper.test.js

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

// Mock Recoil hooks
jest.mock("recoil");

describe("PoiUpdateModalWrapper", () => {
  const mockOnClose = jest.fn();
  const currentPoiMock = {
    idPoi: "123",
    name: "Test POI",
    description: "Test Description",
    idPoiTyp: "1",
    idLD: "2",
  };
  const latlngMock = { lat: 52.52, lng: 13.405 };

  beforeEach(() => {
    // Mock the recoil values
    useRecoilValue.mockImplementation((atom) => {
      if (atom === currentPoiState) return currentPoiMock;
      if (atom === poiReadFromDbTriggerAtom) return 0;
    });
    useSetRecoilState.mockImplementation(() => jest.fn());

    mockOnClose.mockClear();

    // Mock global fetch
    global.fetch = jest.fn((url) =>
      Promise.resolve({
        json: () => {
          if (url.includes("getDeviceIdById")) {
            return Promise.resolve({ idLD: "2", name: "Device1" });
          }
          if (url.includes("readPoiTyp")) {
            return Promise.resolve([{ idPoiTyp: "1", name: "Type1" }]);
          }
          if (url.includes("locationDevices")) {
            return Promise.resolve([{ id: "2", name: "Device1" }]);
          }
          return Promise.resolve({});
        },
      })
    );
  });

  test("renders PoiUpdateModal when 'show' is true", async () => {
    await act(async () => {
      render(<PoiUpdateModalWrapper show={true} onClose={mockOnClose} latlng={latlngMock} />);
    });

    // Check if the modal and its contents are in the document
    expect(screen.getByDisplayValue("Test Description")).toBeInTheDocument();
  });

  test("does not render PoiUpdateModal when 'show' is false", () => {
    render(<PoiUpdateModalWrapper show={false} onClose={mockOnClose} latlng={latlngMock} />);

    // Check if the modal is not in the document
    expect(screen.queryByDisplayValue("Test POI")).not.toBeInTheDocument();
  });

  test("calls onClose when the modal close button is clicked", async () => {
    await act(async () => {
      render(<PoiUpdateModalWrapper show={true} onClose={mockOnClose} latlng={latlngMock} />);
    });

    // Simulate closing the modal
    fireEvent.click(screen.getByLabelText("Close"));
    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });
});