import { useState } from "react";

const HeaderSearchBar = () => {
  const [inputValue, setInputValue] = useState("");

  const onChangeHandler = (event) => {
    setInputValue(event.target.value);
  };

  function validateNpi(val) {
    const pattern = /^\d{10}$/;
    return val && val.length === 10 && pattern.test(val);
  }

  // If inputValue is a valid NPI, then navigate to NPI Lookup page
  if (validateNpi(inputValue)) {
    window.location.replace(`/participation-lookup?npi=${inputValue}`);
  }

  return (
    <div className="qpp-c-search--header-container">
      <div className="qpp-c-search--header-container__block">
        <div className="qpp-c-search--header-container__title">
          Search (beta)
        </div>
        <form
          id="search_form"
          acceptCharset="UTF-8"
          action="https://search.usa.gov/search"
          aria-labelledby="site-search-label"
          role="search"
          method="get"
          className="qpp-c-search qpp-c-search--global  qpp-u-width--100"
        >
          <div
            style={{
              margin: "0px",
              padding: "0px",
              display: "inline",
            }}
          >
            <input name="utf8" type="hidden" value="&#x2713;" />
          </div>
          <input
            id="affiliate"
            name="affiliate"
            type="hidden"
            value="qpp_search-gov-index"
          />
          <label
            id="site-search-label"
            className="qpp-u-visually-hidden"
            htmlFor="query"
          >
            Site Search
          </label>
          <div className="qpp-u-width--100 qpp-u-display--flex">
            <div className="qpp-c-search__wrap">
              <input
                autoComplete="off"
                className="qpp-c-text-input"
                id="query"
                name="query"
                type="text"
                maxLength="50"
                onChange={onChangeHandler}
                value={inputValue}
              />
            </div>
            <button
              name="commit"
              id="global-search"
              type="submit"
              className="qpp-c-search__submit qpp-c-button qpp-c-button--secondary"
            >
              <span className="qpp-u-visually-hidden">Search</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                className="qpp-icon-mat qpp-icon-inline--lg"
                aria-hidden="true"
                focusable="false"
              >
                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
              </svg>
            </button>
          </div>
        </form>
      </div>
      <div>
        <a
          className="survey-link"
          href="https://qppexperience.gov1.qualtrics.com/jfe/form/SV_bqQlaD7c53dD6ES"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback about the Search experience
        </a>
      </div>
    </div>
  );
};

export default HeaderSearchBar;