// __tests__/components/pois/AddPoiModalWindowPopup.test.js

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import AddPoiModalWindowPopup from "../../../components/pois/AddPoiModalWindowPopup";

// Mock the AddPoiModalWindow component
jest.mock("../../../components/pois/AddPoiModalWindow", () => ({ onClose, onSubmit, latlng }) => (
  <div data-testid="add-poi-modal-window">
    <button onClick={() => console.log("Mocked Close Modal Click")}>Close Modal</button>
    <button onClick={onSubmit}>Submit</button>
    <div>
      Coordinates: {latlng.lat}, {latlng.lng}
    </div>
  </div>
));

describe("AddPoiModalWindowPopup", () => {
  const closePopupMock = jest.fn();
  const handleAddStationMock = jest.fn();
  const popupCoordinatesMock = { lat: 52.52, lng: 13.405 };

  // Suppress console.log for the duration of these tests
  beforeAll(() => {
    jest.spyOn(console, "log").mockImplementation(() => {});
  });

  // Restore console.log after all tests
  afterAll(() => {
    console.log.mockRestore();
  });

  beforeEach(() => {
    closePopupMock.mockClear();
    handleAddStationMock.mockClear();
  });

  test("renders the popup when showPopup is true", () => {
    render(<AddPoiModalWindowPopup showPopup={true} closePopup={closePopupMock} handleAddStation={handleAddStationMock} popupCoordinates={popupCoordinatesMock} />);

    expect(screen.getByTestId("add-poi-modal-window")).toBeInTheDocument();
    expect(screen.getByText("Coordinates: 52.52, 13.405")).toBeInTheDocument();
  });

  test("does not render the popup when showPopup is false", () => {
    render(<AddPoiModalWindowPopup showPopup={false} closePopup={closePopupMock} handleAddStation={handleAddStationMock} popupCoordinates={popupCoordinatesMock} />);

    expect(screen.queryByTestId("add-poi-modal-window")).not.toBeInTheDocument();
  });

  test("closes the popup when the top right close button is clicked", () => {
    render(<AddPoiModalWindowPopup showPopup={true} closePopup={closePopupMock} handleAddStation={handleAddStationMock} popupCoordinates={popupCoordinatesMock} />);

    // Use the aria-label to uniquely identify the close button in the outer component
    const closeButton = screen.getByRole("button", { name: "Close" });

    // Click the button with aria-label "Close"
    fireEvent.click(closeButton);
    expect(closePopupMock).toHaveBeenCalledTimes(1);
  });

  test("submits the form when the submit button is clicked", () => {
    render(<AddPoiModalWindowPopup showPopup={true} closePopup={closePopupMock} handleAddStation={handleAddStationMock} popupCoordinates={popupCoordinatesMock} />);

    fireEvent.click(screen.getByText("Submit"));
    expect(handleAddStationMock).toHaveBeenCalledTimes(1); // This should now pass
  });

  test('clicking the "Close Modal" button inside AddPoiModalWindow should not close the popup', () => {
    render(<AddPoiModalWindowPopup showPopup={true} closePopup={closePopupMock} handleAddStation={handleAddStationMock} popupCoordinates={popupCoordinatesMock} />);

    // Click the "Close Modal" button inside the mock
    fireEvent.click(screen.getByText("Close Modal"));
    expect(closePopupMock).toHaveBeenCalledTimes(0); // Should not call the popup close
  });
});