import React from "react";
import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";
import Home from "src/pages/Home";
import { useGetChatsQuery } from "src/backend/redux/api_slice";

// Mock Redux store
const mockStore = configureStore([]);

// Mock the useGetChatsQuery hook
jest.mock("src/backend/redux/api_slice", () => ({
  useGetChatsQuery: jest.fn(),
}));

describe("Home Page", () => {
  let store;

  beforeEach(() => {
    store = mockStore({});
  });

  test("renders Home page with loading state", () => {
    useGetChatsQuery.mockReturnValue({ isLoading: true });

    render(
      <Provider store={store}>
        <Home />
      </Provider>
    );

    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  test("renders Home page with chat data", () => {
    const chatsData = [{ id: 1, name: "Chat 1" }, { id: 2, name: "Chat 2" }];
    useGetChatsQuery.mockReturnValue({ data: chatsData, isLoading: false });

    render(
      <Provider store={store}>
        <Home />
      </Provider>
    );

    expect(screen.getByText("Chat 1")).toBeInTheDocument();
    expect(screen.getByText("Chat 2")).toBeInTheDocument();
  });

  test("renders error message when fetching chats fails", () => {
    useGetChatsQuery.mockReturnValue({ error: true, isLoading: false });

    render(
      <Provider store={store}>
        <Home />
      </Provider>
    );

    expect(screen.getByText(/error/i)).toBeInTheDocument();
  });
});