import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
import { render, fireEvent, screen, cleanup } from "@testing-library/react";
import { Login } from "../../../src/pages/index.js";
import { AuthenticationContext } from "../../../src/contexts/index.js";

describe("Login Component", () => {
  let loginFunction;

  beforeEach(() => {
    loginFunction = vi.fn(); // Mock login function
    render(
      <AuthenticationContext.Provider value={{ login: loginFunction }}>
        <Login />
      </AuthenticationContext.Provider>,
    );
  });

  afterEach(() => {
    cleanup();
  });

  it("renders without errors", () => {
    expect(screen.getByText("Login page")).toBeTruthy();
  });

  it("allows entering a username and password", () => {
    fireEvent.change(screen.getByPlaceholderText("username"), {
      target: { value: "testuser" },
    });
    fireEvent.change(screen.getByPlaceholderText("password"), {
      target: { value: "password123" },
    });

    expect(screen.getByPlaceholderText("username").value).toBe("testuser");
    expect(screen.getByPlaceholderText("password").value).toBe("password123");
  });

  it("handles submit event", async () => {
    fireEvent.change(screen.getByPlaceholderText("username"), {
      target: { value: "testuser" },
    });
    fireEvent.change(screen.getByPlaceholderText("password"), {
      target: { value: "password123" },
    });
    fireEvent.click(screen.getByText("submit"));

    expect(loginFunction).toHaveBeenCalledWith("testuser", "password123");
  });

  //TODO add more tests please :)
});