/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

import React, { useState, useEffect, useRef } from "react";

export function TopSiteFormInput({
  shouldFocus,
  validationError: validationErrorProp = false,
  value = "",
  onClear,
  onChange,
  loading,
  typeUrl,
  titleId,
  placeholderId,
  errorMessageId,
  autoFocusOnOpen,
}) {
  const [validationError, setValidationError] = useState(validationErrorProp);
  const inputRef = useRef(null);
  const prevShouldFocusRef = useRef(false);

  useEffect(() => {
    if (shouldFocus && !prevShouldFocusRef.current && inputRef.current) {
      inputRef.current.focus();
    }
    prevShouldFocusRef.current = shouldFocus;
  }, [shouldFocus]);

  useEffect(() => {
    setValidationError(validationErrorProp);
  }, [validationErrorProp]);

  const onClearIconPress = event => {
    if (event.key === "Enter") {
      onClear();
    }
  };

  const handleChange = ev => {
    if (validationError) {
      setValidationError(false);
    }
    onChange(ev);
  };

  const renderLoadingOrCloseButton = () => {
    const showClearButton = value && onClear;

    if (loading) {
      return (
        <div className="loading-container">
          <div className="loading-animation" />
        </div>
      );
    } else if (showClearButton) {
      return (
        <button
          type="button"
          className="icon icon-clear-input icon-button-style"
          onClick={onClear}
          onKeyDown={onClearIconPress}
          data-l10n-id="newtab-topsites-clear-input"
        />
      );
    }
    return null;
  };

  return (
    <label>
      <span data-l10n-id={titleId} />
      <div
        className={`field ${typeUrl ? "url" : ""}${
          validationError ? " invalid" : ""
        }`}
      >
        <input
          type="text"
          value={value}
          ref={inputRef}
          onChange={handleChange}
          data-l10n-id={placeholderId}
          // Set focus on error if the url field is valid or when the input is first rendered and is empty
          // eslint-disable-next-line jsx-a11y/no-autofocus
          autoFocus={autoFocusOnOpen}
          disabled={loading}
        />
        {renderLoadingOrCloseButton()}
        {validationError && (
          <aside className="error-tooltip" data-l10n-id={errorMessageId} />
        )}
      </div>
    </label>
  );
}