import { fireEvent, render } from "@testing-library/react";

import { Alert } from "../";

describe("rendering", () => {
  describe("initial state", () => {
    it("has default className alert", () => {
      const { getByTestId } = render(<Alert data-testid="test" />);
      expect(getByTestId("test")).toHaveClass("alert");
    });
  });

  describe("passed props", () => {
    it("renders title", () => {
      const { getByText } = render(<Alert title="Title" />);
      expect(getByText("Title")).toBeInTheDocument();
    });

    it("renders renderTitle prior to title", () => {
      const { getByText } = render(
        <Alert title="Title" renderTitle={() => <h1>Title</h1>} />,
      );
      expect(getByText("Title").tagName).toBe("H1");
    });

    it("renders description", () => {
      const { getByText } = render(<Alert description="Description" />);
      expect(getByText("Description")).toBeInTheDocument();
    });

    it("renders actionButtons", () => {
      const { getByText } = render(
        <Alert actionButtons={<button>button</button>} />,
      );
      expect(getByText("button")).toBeInTheDocument();
    });

    it("renders headingLevel", () => {
      const { getByText } = render(<Alert headingLevel={1} title="Title" />);
      expect(getByText("Title").tagName).toBe("H1");
    });

    ["warning", "info", "danger", "success"].map((type) => {
      it(`should have alert--${type}`, () => {
        const { getByTestId } = render(
          <Alert data-testid="test" type={type} />,
        );
        expect(getByTestId("test")).toHaveClass(`alert--${type}`);
      });
    });

    it("renders isFullLength", () => {
      const { getByTestId } = render(
        <Alert data-testid="test" title="Title" isFullWidth={true} />,
      );
      expect(getByTestId("test")).toHaveClass(`alert--full-width`);
    });

    it("passes other props", () => {
      const { getByTestId } = render(<Alert data-testid="test" />);
      expect(getByTestId("test")).toBeInTheDocument();
    });

    it("does not render close button when onClose is not provided", () => {
      const { container } = render(<Alert title="Title" />);
      expect(container.querySelector(".alert__close")).toBeNull();
    });

    it("renders close button when onClose is provided", () => {
      const { container } = render(<Alert title="Title" onClose={() => {}} />);
      expect(container.querySelector(".alert__close")).toBeInTheDocument();
    });

    it("calls onClose when close button is clicked", () => {
      const handleClose = vi.fn();
      const { container } = render(
        <Alert title="Title" onClose={handleClose} />,
      );

      const closeButton = container.querySelector(".alert__close button");
      expect(closeButton).toBeInTheDocument();

      fireEvent.click(closeButton);
      expect(handleClose).toHaveBeenCalledTimes(1);
    });
  });

  describe("palette and theme logic", () => {
    it("should inherit color variables from parent theme", () => {
      const { getByTestId } = render(
        <div className="is-dark">
          <Alert data-testid="test" />
        </div>,
      );
      expect(getByTestId("test")).toHaveClass("alert");
      // This test assumes CSS variables are set by parent; actual color checks require e2e or visual regression
    });
  });
});