import React from "react";
import { render, fireEvent, waitFor } from "@testing-library/react-native";
import "jest-styled-components/native";
import { AtomInputNumber } from "./index";
import { theme } from "data/dataMx";

describe("[Native] AtomInputNumber", () => {
  const mockErrorCallback = jest.fn();
  const mockOnChange = jest.fn();
  it("Rendered component onchange", () => {
    const component = render(
      <AtomInputNumber
        placeholder={"placeholder"}
        disabled={false}
        readOnly={false}
        onChange={mockOnChange}
      />
    );
    const input = component.getByTestId("TestInputNumber");
    fireEvent.changeText(input, "132");
    expect(mockOnChange).toHaveBeenCalled();
  });

  it("Rendered component ReadOnly", () => {
    const component = render(<AtomInputNumber value={"0"} readOnly={true} />);
    const input = component.getByTestId("TestInputNumber");

    expect(input).toHaveStyleRule("border-color", `${theme.transparent}`);
  });

  it("Rendered component disabled", () => {
    const component = render(<AtomInputNumber disabled={true} />);
    const input = component.getByTestId("TestInputNumber");

    expect(input).toHaveStyleRule("border-color", `${theme.neutral300}`);
  });

  it("Rendered component with value", () => {
    const component = render(<AtomInputNumber value="12345679" />);
    const input = component.getByTestId("TestInputNumber");

    expect(input.props.value).toBe("12345679");
  });

  it("Validate required", async () => {
    const component = render(
      <AtomInputNumber
        onChange={mockOnChange}
        errorCallback={mockErrorCallback}
        required={true}
      />
    );
    const input = component.getByTestId("TestInputNumber");
    fireEvent(input, "focus");
    fireEvent(input, "blur");
    await waitFor(() => expect(mockErrorCallback).toHaveBeenCalled());
  });

  it("Validate invalid number", async () => {
    const component = render(
      <AtomInputNumber
        onChange={mockOnChange}
        errorCallback={mockErrorCallback}
      />
    );
    const input = component.getByTestId("TestInputNumber");
    fireEvent(input, "focus");
    fireEvent.changeText(input, "notValidNumber");
    fireEvent(input, "blur");
    expect(mockOnChange).toHaveBeenCalled();
    await waitFor(() => expect(mockErrorCallback).toHaveBeenCalled());
  });

  it("Validate valid number", async () => {
    const component = render(
      <AtomInputNumber
        onChange={mockOnChange}
        errorCallback={mockErrorCallback}
      />
    );
    const input = component.getByTestId("TestInputNumber");
    fireEvent(input, "focus");
    fireEvent.changeText(input, "1234");
    fireEvent(input, "blur");
    expect(mockOnChange).toHaveBeenCalled();
    expect(input).toHaveStyleRule("border-color", `${theme.neutral400}`);
  });
});
