import { render, screen, fireEvent } from "@testing-library/react";
import useQuery from "./useQuery";

const MyComponent = () => {
  const {
    payload,
    query,
    setQuery,
  } = useQuery();

  return (
    <>
      <input
        data-testid="input"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ol>
        <li data-testid="search">{payload.search}</li>
        <li data-testid="vins">{payload.vins}</li>
        <li data-testid="query">{query}</li>
      </ol>
    </>
  )
}

const template = (desc, data, expected) => {
  it(desc, () => {
    render(<MyComponent />);
    const input = screen.getByTestId("input");
    const search = screen.getByTestId("search");
    const vins = screen.getByTestId("vins");
    const query = screen.getByTestId("query");

    fireEvent.change(input, { target: { value: data } });
    expect(search.innerHTML).toBe(expected[0]);
    expect(vins.innerHTML).toBe(expected[1]);
    expect(query.innerHTML).toBe(expected[2]);
  });
}

describe("useQuery", () => {
  [
    [
      "parses a search query",
      "test",
      ["test", "", "test"]
    ],
    [
      "parses a vin query",
      "VCF1ZBU23PG001209",
      ["", "VCF1ZBU23PG001209", "vin:VCF1ZBU23PG001209"]
    ],
    [
      "parses a mixed search and vin query",
      "test VCF1ZBU23PG001209",
      ["test", "VCF1ZBU23PG001209", "test vin:VCF1ZBU23PG001209"]
    ],

    [
      "parses a comma separated search query",
      "ocean,pear,alaska,ronin",
      ["ocean pear alaska ronin", "", "ocean pear alaska ronin"]
    ],
    [
      "parses a comma separated vin query",
      "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162",
      ["", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
    ],
    [
      "parses a comma separated mixed search and vin query",
      "test,VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162",
      ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "test vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
    ],

    [
      "parses a space separated search query",
      "ocean pear alaska ronin",
      ["ocean pear alaska ronin", "", "ocean pear alaska ronin"]
    ],
    [
      "parses a space separated vin query",
      "VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162",
      ["", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
    ],
    [
      "parses a space separated mixed search and vin query",
      "test VCF1EBE2008016235 VCF1EBE20PG001002 VCF1EBE20PG001162",
      ["test", "VCF1EBE2008016235,VCF1EBE20PG001002,VCF1EBE20PG001162", "test vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 vin:VCF1EBE20PG001162"]
    ],

    [
      "trims extraneous values from search",
      "ocean,, , ,,,,pear,,, ",
      ["ocean pear", "", "ocean pear"]
    ],
    [
      "trims extraneous values from vins",
      "VCF1EBE2008016235,, , ,,,,VCF1EBE20PG001002,,, ",
      ["", "VCF1EBE2008016235,VCF1EBE20PG001002", "vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002"]
    ],

    [
      "honors a declared vin",
      "vin:1209",
      ["", "1209", "vin:1209"]
    ],
    [
      "keeps order of query parts",
      "test vin:1209 VCF1EBE2008016235,VCF1EBE20PG001002 test2",
      ["test test2", "1209,VCF1EBE2008016235,VCF1EBE20PG001002", "test vin:1209 vin:VCF1EBE2008016235 vin:VCF1EBE20PG001002 test2"]
    ],
  ].forEach((args) => template(...args))
});