import React from "react";
import { AtomButtonBack } from "./index";
import { render, fireEvent } from "@testing-library/react-native";
import { act } from "react-dom/test-utils";
import { theme } from "data/dataMx";

describe("[Native] AtomButtonBack   ", () => {
  test("Render button", () => {
    const body = {
      disabled: false,
      text: "Accept",
      width: "200px",
    } as const;
    const component = render(<AtomButtonBack {...body} />);
    const button = component.getByText(body.text);

    expect(button).toBeDefined();
  });

  test("Render button without width", () => {
    const body = {
      disabled: false,
      text: "Accept",
    } as const;
    const component = render(<AtomButtonBack {...body} />);
    component.getByText(body.text);
  });

  test("Button clicked", async () => {
    const handlePress = jest.fn();
    const body = {
      disabled: false,
      text: "Accept",
      width: "244px",
      onPress: handlePress,
    } as const;

    const component = render(<AtomButtonBack {...body} />);
    const button = component.getByText(body.text);
    fireEvent.press(button);
    expect(handlePress).toHaveBeenCalledTimes(1);
  });
  test("Button disabled clicked", async () => {
    const handlePress = jest.fn();
    const body = {
      disabled: true,
      text: "Accept",
      width: "244px",
      onPress: handlePress,
    } as const;

    const component = render(<AtomButtonBack {...body} />);
    const button = component.getByText(body.text);
    fireEvent.press(button);
    expect(handlePress).toHaveBeenCalledTimes(0);
  });
  test("Button onPressOut", async () => {
    await act(async () => {
      const body = {
        disabled: false,
        text: "Accept",
      } as const;

      const component = await render(<AtomButtonBack {...body} />);
      const button = component.getByText(body.text);
      fireEvent(button, "pressOut");

      expect(button.props.style[0].color).toBe(theme.neutral600);
    });
  });
  test("Button onPress not disabled", async () => {
    await act(async () => {
      const body = {
        disabled: false,
        text: "Accept",
      };

      const component = await render(<AtomButtonBack {...body} />);
      const button = component.getByText(body.text);
      fireEvent.press(button);

      expect(button.props.style[0].color).toBe(theme.neutral700);
    });
  });
  test("Button onPress disabled", async () => {
    await act(async () => {
      const body = {
        disabled: true,
        text: "Accept",
        onPress: () => {},
      };

      const component = await render(<AtomButtonBack {...body} />);
      const button = component.getByText(body.text);
      fireEvent.press(button);

      expect(button.props.style[0].color).toBe(theme.neutral500);
    });
  });
});
