import React from "react";
import { fireEvent, render, screen } from "@testing-library/react-native";
import { CloseButton, CloseButtonProps } from "../CloseButton";

jest.mock("@applicaster/zapp-react-native-ui-components/Components", () => {
  const { Image } = require("react-native");

  return { QBImage: Image };
});

const mockGetButtonA11yProps = jest.fn(() => ({
  accessible: true,
  accessibilityLabel: "Close",
  accessibilityHint: "Closes the sheet",
  accessibilityRole: "button",
}));

jest.mock(
  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager",
  () => ({
    AccessibilityManager: {
      getInstance: () => ({
        getButtonAccessibilityProps: mockGetButtonA11yProps,
      }),
    },
  })
);

const baseProps: CloseButtonProps = {
  enabled: true,
  close: jest.fn(),
  asset: "close.png",
  assetFocused: "close_focused.png",
  height: 24,
  width: 24,
  marginTop: 0,
  marginBottom: 0,
  marginLeft: 0,
  marginRight: 0,
};

describe("ModalComponent Header CloseButton", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("renders as an accessible button reachable by screen readers", () => {
    render(<CloseButton {...baseProps} />);

    const button = screen.getByTestId("closeButton");

    expect(button.props.accessible).toBe(true);
    expect(button.props.accessibilityRole).toBe("button");
    expect(button.props.accessibilityLabel).toBe("Close");
    expect(mockGetButtonA11yProps).toHaveBeenCalledWith("close");
  });

  it("invokes close on press", () => {
    const close = jest.fn();
    render(<CloseButton {...baseProps} close={close} />);

    fireEvent.press(screen.getByTestId("closeButton"));

    expect(close).toHaveBeenCalledTimes(1);
  });

  it("renders nothing when disabled", () => {
    render(<CloseButton {...baseProps} enabled={false} />);

    expect(screen.queryByTestId("closeButton")).toBeNull();
  });
});