import React from "react";
import { Animated } from "react-native";
import { render } from "@testing-library/react-native";

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

    return {
      BackgroundImage: () => (
        <Text testID="background-image">BackgroundImage</Text>
      ),
    };
  }
);

import { Overlay } from "../Overlay";

const flattenStyle = (style: unknown): Record<string, unknown> => {
  if (!style) {
    return {};
  }

  if (Array.isArray(style)) {
    return style.reduce<Record<string, unknown>>(
      (acc, item) => ({ ...acc, ...flattenStyle(item) }),
      {}
    );
  }

  if (typeof style === "object") {
    return style as Record<string, unknown>;
  }

  return {};
};

describe("Overlay", () => {
  it("renders the animated overlay container", () => {
    const opacity = new Animated.Value(1);

    const { getByTestId } = render(
      <Overlay opacity={opacity} backgroundColor="#000000" />
    );

    expect(getByTestId("animated-component")).toBeTruthy();
  });

  it("applies opacity and backgroundColor to the overlay", () => {
    const opacity = new Animated.Value(0.5);

    const { getByTestId } = render(
      <Overlay opacity={opacity} backgroundColor="#ff0000" />
    );

    const style = flattenStyle(getByTestId("animated-component").props.style);

    expect(style.backgroundColor).toBe("#ff0000");
    expect(style.opacity).toBe(0.5);
  });

  it("positions the overlay with absolute fill layout", () => {
    const opacity = new Animated.Value(1);

    const { getByTestId } = render(
      <Overlay opacity={opacity} backgroundColor="#000000" />
    );

    const style = flattenStyle(getByTestId("animated-component").props.style);

    expect(style.position).toBe("absolute");
    expect(style.top).toBe(0);
    expect(style.left).toBe(0);
    expect(style.right).toBe(0);
    expect(style.bottom).toBe(0);
  });

  it("renders BackgroundImage inside the overlay", () => {
    const opacity = new Animated.Value(1);

    const { getByTestId } = render(
      <Overlay opacity={opacity} backgroundColor="#000000" />
    );

    expect(getByTestId("background-image")).toBeTruthy();
  });
});