import * as React from "react";
import {
  BorderContainerView,
  getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
} from "../index";
import { render } from "@testing-library/react-native";
import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
import { View } from "react-native";

jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
  toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
}));

jest.mock(
  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
  () => ({
    useAccessibilityManager: jest.fn(() => ({
      addHeading: jest.fn(),
    })),
  })
);

describe("BorderContainerView", () => {
  describe("getBorderPadding", () => {
    it("returns 0 for inside", () => {
      expect(getBorderPadding("inside", 10)).toBe(0);
    });

    it("returns borderWidth / 2 for center", () => {
      expect(getBorderPadding("center", 10)).toBe(5);
    });

    it("returns borderWidth for outside", () => {
      expect(getBorderPadding("outside", 10)).toBe(10);
    });

    it("returns borderWidth for invalid position", () => {
      // @ts-ignore
      expect(getBorderPadding("other_value", 10)).toBe(10);
    });
  });

  it("Border component renders null if no borderPosition", () => {
    const style = { borderWidth: 5, borderRadius: 10, borderColor: "red" };

    const padding = {
      paddingTop: 2,
      paddingRight: 3,
      paddingBottom: 4,
      paddingLeft: 5,
    };

    const borderPosition = null;
    const mockEntry = { id: "test-entry" } as ZappEntry;
    const mockHasFocusableInside = jest.fn(() => false);

    const { queryByTestId } = render(
      <BorderContainerView
        style={style}
        testID="border-container"
        borderPosition={borderPosition}
        borderPaddingTop={toNumberWithDefaultZero(padding.paddingTop)}
        borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
        borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
        borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
        hasFocusableInside={mockHasFocusableInside}
        entry={mockEntry}
        state="focused"
        hasTextLabels={false}
      >
        <View testID="child" />
      </BorderContainerView>
    );

    const children = queryByTestId("border-container").children;

    expect(children[1].props.testID).toBe("child");

    expect(children[0].children.length).toBe(0);
  });
});