import { AddressInputBanner } from "./index";

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

describe("AddressInputBanner", () => {
  const defaultProps = {
    title: "Check availability",
    isVisible: true,
    navHeight: 64,
  };

  it("renders title when visible", () => {
    render(<AddressInputBanner {...defaultProps} />);
    expect(screen.getByText("Check availability")).toBeInTheDocument();
  });

  it("returns null when isVisible is false", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} isVisible={false} />
    );
    expect(container.firstChild).toBeNull();
  });

  it("applies sticky top style from navHeight", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} navHeight={80} />
    );
    const div = container.firstChild as HTMLElement;
    expect(div.style.top).toBe("80px");
  });

  it("applies yellow variant styles by default", () => {
    const { container } = render(<AddressInputBanner {...defaultProps} />);
    const div = container.firstChild as HTMLElement;
    expect(div.className).toContain("bg-bg-fill-brand-accent");
    expect(div.className).toContain("text-text");
  });

  it("applies white variant styles", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} variant="white" />
    );
    const div = container.firstChild as HTMLElement;
    expect(div.className).toContain("bg-white");
  });

  it("applies navy variant styles", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} variant="navy" />
    );
    const div = container.firstChild as HTMLElement;
    expect(div.className).toContain("bg-bg-fill-inverse");
    expect(div.className).toContain("text-text-inverse");
  });

  it("applies green variant styles", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} variant="green" />
    );
    const div = container.firstChild as HTMLElement;
    expect(div.className).toContain("bg-bg-fill-success");
    expect(div.className).toContain("text-text-inverse");
  });

  it("falls back to yellow for unknown variant", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} variant="unknown" />
    );
    const div = container.firstChild as HTMLElement;
    expect(div.className).toContain("bg-bg-fill-brand-accent");
  });

  it("is case-insensitive for variant", () => {
    const { container } = render(
      <AddressInputBanner {...defaultProps} variant="Navy" />
    );
    const div = container.firstChild as HTMLElement;
    expect(div.className).toContain("bg-bg-fill-inverse");
  });

  it("renders renderCheckPlans output", () => {
    const renderCheckPlans = jest.fn(() => (
      <div data-testid="check-plans">Plans</div>
    ));
    render(
      <AddressInputBanner
        {...defaultProps}
        renderCheckPlans={renderCheckPlans}
      />
    );
    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
  });

  it("calls renderCheckPlans with correct arguments", () => {
    const renderCheckPlans = jest.fn(() => null);
    const cta = {
      buttonLabel: "See plans",
      buttonVariant: "primary_brand",
    } as any;
    render(
      <AddressInputBanner
        {...defaultProps}
        cta={cta}
        renderCheckPlans={renderCheckPlans}
      />
    );
    expect(renderCheckPlans).toHaveBeenCalledWith({
      ctaText: "See plans",
      buttonVariant: "primary_brand",
      showButtonAs: "solid",
      cta,
    });
  });

  it("uses default ctaLabel 'Check plans' when cta.buttonLabel is not provided", () => {
    const renderCheckPlans = jest.fn(() => null);
    render(
      <AddressInputBanner
        {...defaultProps}
        renderCheckPlans={renderCheckPlans}
      />
    );
    expect(renderCheckPlans).toHaveBeenCalledWith(
      expect.objectContaining({ ctaText: "Check plans" })
    );
  });

  it("does not crash without renderCheckPlans", () => {
    const { container } = render(<AddressInputBanner {...defaultProps} />);
    expect(container.firstChild).toBeInTheDocument();
  });
});