/** @jsx jsx */
import React, { memo, useLayoutEffect, useRef, useState } from 'react';
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { withAnalyticsContext } from '@atlaskit/analytics-next';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
import SearchIcon from '@atlaskit/icon/glyph/search';
import Textfield from '@atlaskit/textfield';
import { N200 } from '@atlaskit/theme/colors';
import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
import useFocus from '../hooks/use-focus';
import commonMessages from '../messages';
import { Modes } from '../types';
function ElementSearch({
  onSearch,
  mode,
  intl: {
    formatMessage
  },
  focus,
  onClick,
  onKeyDown,
  searchTerm,
  items,
  selectedItemIndex
}) {
  const ref = useFocus(focus);
  const assistiveTextRef = useRef(null);
  const [inputFocused, setInputFocused] = useState(false);
  useLayoutEffect(() => {
    if (assistiveTextRef) {
      const assistiveDiv = assistiveTextRef.current;
      /**
       * We need to remove and set attributes, for the proper working of screen readers.
       */
      assistiveDiv === null || assistiveDiv === void 0 ? void 0 : assistiveDiv.removeAttribute('aria-live');
      assistiveDiv === null || assistiveDiv === void 0 ? void 0 : assistiveDiv.setAttribute('aria-live', 'polite');
    }
  }, [items, formatMessage]);
  const onChange = ({
    target: {
      value
    }
  }) => {
    onSearch(value);
  };
  const onFocus = e => {
    setInputFocused(true);
  };
  const onBlur = e => {
    setInputFocused(false);
  };
  const getFormattedMessage = itemsCount => {
    if (searchTerm === '') {
      return `${formatMessage(commonMessages.assistiveTextDefault, {
        count: itemsCount
      })}`;
    }
    if (itemsCount > 1) {
      return `${formatMessage(commonMessages.assistiveTextResult, {
        count: itemsCount
      })}`;
    }
    if (itemsCount === 1) {
      return `${formatMessage(commonMessages.assistiveTextResult, {
        count: itemsCount
      })}`;
    }
    return formatMessage(commonMessages.assistiveTextResult, {
      count: itemsCount
    });
  };
  const assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
  const isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
  const ariaActiveDescendant = isInputNotFocusedAndItemSelected ? `searched-item-${selectedItemIndex}` : undefined;
  return jsx("div", {
    css: [wrapper, mode === Modes.inline && wrapperInline]
  }, jsx(Textfield, {
    ref: ref,
    onChange: onChange,
    onClick: onClick,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    onBlur: onBlur,
    elemBeforeInput: jsx("div", {
      css: elementBeforeInput,
      "data-testid": "element_search__element_before_input",
      "aria-hidden": "true"
    }, jsx(SearchIcon, {
      size: "medium",
      label: "Advanced search",
      primaryColor: "inherit"
    })),
    elemAfterInput: jsx("div", {
      css: elementAfterInput,
      "data-testid": "element_search__element_after_input"
    }, jsx("div", {
      css: styledShortcut
    }, "\u23CE ", formatMessage(commonMessages.elementAfterInputMessage))),
    placeholder: formatMessage(commonMessages.placeHolderMessage),
    "aria-label": "search",
    "aria-labelledby": "search-assistive",
    className: "js-search-input",
    role: "combobox",
    "aria-activedescendant": ariaActiveDescendant,
    value: searchTerm
  }), jsx("span", {
    id: "search-assistive",
    ref: assistiveTextRef,
    "aria-live": "polite",
    "aria-atomic": "true",
    className: "assistive"
  }, assistiveMessage));
}
const styledShortcut = css(shortcutStyle, {
  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
  width: "var(--ds-space-600, 48px)"
});
const wrapper = css({
  '& > [data-ds--text-field--container]': {
    height: `${GRID_SIZE * 6}px`,
    borderRadius: `${GRID_SIZE}px`,
    flex: '1 1 100%',
    overflow: 'visible',
    '& > [data-ds--text-field--input]': {
      fontSize: relativeFontSizeToBase16(14),
      padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"} 0`
    }
  }
});
const wrapperInline = css({
  '& > [data-ds--text-field--container]': {
    height: `${GRID_SIZE * 5}px`,
    flex: 'none',
    overflow: 'revert'
  }
});
const elementBeforeInput = css({
  margin: `1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"}`,
  color: `var(--ds-icon, ${N200})`,
  'span, svg': {
    height: '20px',
    width: '20px'
  }
});
const elementAfterInput = css({
  margin: `0 ${"var(--ds-space-100, 8px)"}`,
  height: SEARCH_ITEM_HEIGHT_WIDTH,
  textAlign: 'center'
});
const MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
  component: 'Searchbar'
})(injectIntl(ElementSearch)));
export default MemoizedElementSearchWithAnalytics;