import React from "react";
import { fireEvent, render, waitFor } from "@testing-library/react-native";
import { InputSearch } from "./InputSearch";

const accessibilityLabelSearch = "Search";
const accessibilityHint = "Search clients, properties, quotes, etc.";
const mockOnChange = jest.fn();
const mockOnDebouncedChange = jest.fn();
let searchValue: string;

beforeEach(() => {
  mockOnChange.mockReset();
  mockOnDebouncedChange.mockReset();
  searchValue = "";
});

function setup() {
  return render(
    <InputSearch
      accessibilityHint={accessibilityHint}
      accessibilityLabel={accessibilityLabelSearch}
      placeholder={accessibilityHint}
      value={searchValue}
      onChange={mockOnChange}
      onDebouncedChange={mockOnDebouncedChange}
    />,
  );
}

describe("InputSearch", () => {
  it("renders the search input text", () => {
    const { getByHintText, getByLabelText } = setup();

    expect(getByLabelText(accessibilityLabelSearch)).toBeDefined();
    expect(getByHintText(accessibilityHint)).toBeDefined();
  });

  it("passes the correct search value to onChange when the value changed", () => {
    const { getByLabelText } = setup();
    const inputSearch = getByLabelText(accessibilityLabelSearch);

    fireEvent.changeText(inputSearch, "Apollo Client");
    expect(mockOnChange).toHaveBeenCalledWith("Apollo Client");
  });

  it("passes the correcet search value to onDebouncedChange when the value changed", async () => {
    const { getByLabelText } = setup();
    const inputSearch = getByLabelText(accessibilityLabelSearch);

    // `fireEvent` is hoisted out of `waitFor` because the debounced search
    // callback resets its 300ms timer on every change event. If `fireEvent`
    // runs inside `waitFor`, every poll re-fires the change and the
    // debounce timer never gets to fire — which is flaky under heavy CI
    // load even when the test passes locally.
    fireEvent.changeText(inputSearch, "Update Apollo Client");

    await waitFor(() => {
      expect(mockOnDebouncedChange).toHaveBeenCalled();
    });
  });

  it("clears the search value when the clear button is pressed", () => {
    searchValue = "test search value";
    const { getByLabelText } = setup();

    fireEvent(getByLabelText(accessibilityLabelSearch), "focus");

    const inputSearchClearButton = getByLabelText("Clear input");
    fireEvent.press(inputSearchClearButton);
    expect(mockOnChange).toHaveBeenCalledWith("");
  });
});