import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { EventTypeConfig } from "../hooks/event-types";
import { EventTypeModal } from "./EventTypeModal";

describe("EventTypeModal", () => {
  const mockFormData: EventTypeConfig = {
    name: "30 Min Meeting",
    description: "Test description",
    duration: 30,
    bufferTime: 0,
    requiresApproval: false,
  };

  const mockSetIsModalOpen = vi.fn();
  const mockSetFormData = vi.fn();
  const mockHandleSaveEventType = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders when open", () => {
    render(
      <EventTypeModal
        isModalOpen={true}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={null}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    expect(screen.getByText("New Call Type")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(
      <EventTypeModal
        isModalOpen={false}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={null}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    expect(screen.queryByText("New Call Type")).not.toBeInTheDocument();
  });

  it("shows create title when editingEventType is null", () => {
    render(
      <EventTypeModal
        isModalOpen={true}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={null}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    expect(screen.getByText("New Call Type")).toBeInTheDocument();
  });

  it("shows edit title when editingEventType is provided", () => {
    render(
      <EventTypeModal
        isModalOpen={true}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={mockFormData}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    expect(screen.getByText("Edit Call Type")).toBeInTheDocument();
  });

  it("displays form fields", () => {
    render(
      <EventTypeModal
        isModalOpen={true}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={null}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    expect(screen.getByText("Call type name")).toBeInTheDocument();
    expect(screen.getByText("Description")).toBeInTheDocument();
    expect(screen.getByText("Time Configuration")).toBeInTheDocument();
  });

  it("displays name input with correct value", () => {
    render(
      <EventTypeModal
        isModalOpen={true}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={null}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    const inputs = screen.getAllByDisplayValue("30 Min Meeting");
    expect(inputs.length).toBeGreaterThan(0);
  });

  it("calls setFormData when name is changed", () => {
    render(
      <EventTypeModal
        isModalOpen={true}
        setIsModalOpen={mockSetIsModalOpen}
        editingEventType={null}
        formData={mockFormData}
        setFormData={mockSetFormData}
        handleSaveEventType={mockHandleSaveEventType}
      />
    );
    const inputs = screen.getAllByDisplayValue("30 Min Meeting");
    fireEvent.change(inputs[0], { target: { value: "New Name" } });
    expect(mockSetFormData).toHaveBeenCalled();
  });
});
