import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Expandable search component.
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
export function ActionBarSearch({
  searchQuery = '',
  onChange = () => {},
  onKeyDown = () => {},
  focusPlaceholder = '',
  customClassName = '',
  searchText,
  searchInputAriaLabel,
  isDisabled = false,
  testId = 'actionbar-search-button',
  clearSearchTestId = 'action-bar-search-clear',
  searchInputTestId = 'actionbar-search-input',
  searchInputContainerTestId = 'actionbar-search-input-container',
  ...inputProps
}) {
  const {
    t
  } = useTranslation();
  const searchTextWithDefault = searchText ?? t('Search');
  const [isActive, setIsActive] = useState(searchQuery !== '');
  const [value, setValue] = useState(searchQuery);
  useEffect(() => {
    // if searchQuery changed from the outside and is different from value
    // we have to sync those 2
    if (searchQuery !== value) {
      // depending on a new value - show or hide the input
      if (!searchQuery) {
        setIsActive(false);
        // we have to call onChange because in many usages searchQuery and onChange are not connected =(
        onChange('');
      } else {
        setIsActive(true);
      }
      setValue(searchQuery);
    }
  }, [searchQuery]);
  function onBlur() {
    setIsActive(value !== '');
  }
  function onValueEnter({
    target
  }) {
    setValue(target.value);
    onChange(target.value);
  }
  function onClick() {
    if (isDisabled) {
      return;
    }
    setIsActive(true);
  }
  function onClear() {
    setIsActive(false);
    setValue('');
    onChange('');
  }

  // onMouseDown is used to prevent premature onBlur event
  return /*#__PURE__*/_jsxs("div", {
    className: classnames('action-bar-search-container', customClassName),
    children: [/*#__PURE__*/_jsxs("button", {
      "test-id": testId,
      className: classnames('button command action-bar-search-button', {
        active: isActive
      }),
      type: "button",
      onClick: onClick,
      disabled: isDisabled,
      "aria-label": searchTextWithDefault,
      "aria-expanded": isActive,
      tabIndex: isActive ? -1 : 0,
      children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
        icon: faMagnifyingGlass,
        className: "search-icon",
        onMouseDown: e => {
          e.preventDefault();
        }
      }), !isActive && /*#__PURE__*/_jsx("span", {
        children: searchTextWithDefault
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: classnames('input-container', {
        active: isActive
      }),
      "test-id": searchInputContainerTestId,
      children: isActive && /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("input", {
          "aria-label": searchInputAriaLabel ?? t('Search input'),
          "test-id": searchInputTestId,
          autoFocus: true,
          type: "text",
          className: "action-bar-search-input",
          placeholder: focusPlaceholder,
          onChange: onValueEnter,
          onBlur: onBlur,
          onKeyDown: onKeyDown,
          value: value,
          disabled: isDisabled,
          ...inputProps
        }), value !== '' && !isDisabled && /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faXmark,
          "test-id": clearSearchTestId,
          className: "clear-search",
          onMouseDown: e => {
            e.preventDefault();
          },
          onClick: onClear
        })]
      })
    })]
  });
}