import React from "react";
import { render, screen, waitFor, fireEvent } from "@testing-library/react";
import { jest } from "@jest/globals";
import TableDataPopup from "../components/TableDataPopup.js";
import { UserProvider } from "../context/UserContext.js";
import { BrowserRouter } from "react-router-dom";

const mockUserContext = {
  permissions: [{ Path: "/popup", Permission_Id: "1" }],
};

const renderComponent = (props = {}) => {
  const mockTogglePopup = jest.fn();
  const defaultProps = {
    empId: "E001",
    applicationName: "Chrome",
    togglePopup: mockTogglePopup,
    summaryFilter: {},
    searchText: "",
    selectedRange: { startDate: "", endDate: "" },
    ...props,
  };

  const result = render(
    <BrowserRouter>
      <UserProvider value={mockUserContext}>
        <TableDataPopup {...defaultProps} />
      </UserProvider>
    </BrowserRouter>
  );

  return { ...result, mockTogglePopup };
};

describe("TableDataPopup Component", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("should render the component", () => {
    renderComponent();
    expect(screen.getByText("Chrome")).toBeInTheDocument();
  });

  it("should render application name as title", () => {
    renderComponent({ applicationName: "Firefox" });
    expect(screen.getByText("Firefox")).toBeInTheDocument();
  });

  it("should render close button", () => {
    renderComponent();
    expect(screen.getByRole("button")).toBeInTheDocument();
  });

  it("should render loader initially", () => {
    renderComponent();
    expect(screen.getByTestId("loader")).toBeInTheDocument();
  });

  it("should render common table", () => {
    renderComponent();
    expect(screen.getByTestId("common-table")).toBeInTheDocument();
  });

  it("should call togglePopup when close button clicked", async () => {
    const { mockTogglePopup } = renderComponent();
    
    const closeButton = screen.getByRole("button");
    const closeIcon = closeButton.querySelector("svg");
    if (closeIcon) {
      fireEvent.click(closeIcon);
    }
    
    await waitFor(() => {
      expect(mockTogglePopup).toHaveBeenCalledTimes(1);
    });
  });

  it("should render with summaryFilter", () => {
    const summaryFilter = {
      CallDate: { startDate: new Date(), endDate: new Date() },
      ResultsFor: "today",
    };
    renderComponent({ summaryFilter });
    expect(screen.getByText("Chrome")).toBeInTheDocument();
  });

  it("should render with selectedRange", () => {
    const selectedRange = {
      startDate: "2024-01-01",
      endDate: "2024-01-31",
    };
    renderComponent({ selectedRange });
    expect(screen.getByText("Chrome")).toBeInTheDocument();
  });

  it("should render with searchText", () => {
    renderComponent({ searchText: "test search" });
    expect(screen.getByText("Chrome")).toBeInTheDocument();
  });

  it("should render with numeric empId", () => {
    renderComponent({ empId: 123 });
    expect(screen.getByText("Chrome")).toBeInTheDocument();
  });
});
