import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { memo, useLayoutEffect, useRef, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
import SearchIcon from '@atlaskit/icon/core/search';
import { fg } from '@atlaskit/platform-feature-flags';
import Textfield from '@atlaskit/textfield';
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(_ref) {
  var onSearch = _ref.onSearch,
    mode = _ref.mode,
    formatMessage = _ref.intl.formatMessage,
    focus = _ref.focus,
    onClick = _ref.onClick,
    onKeyDown = _ref.onKeyDown,
    searchTerm = _ref.searchTerm,
    items = _ref.items,
    selectedItemIndex = _ref.selectedItemIndex,
    ariaControlsId = _ref.ariaControlsId;
  var ref = useFocus(focus);
  var assistiveTextRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    inputFocused = _useState2[0],
    setInputFocused = _useState2[1];
  useLayoutEffect(function () {
    if (assistiveTextRef) {
      var assistiveDiv = assistiveTextRef.current;
      /**
       * We need to remove and set attributes, for the proper working of screen readers.
       */
      assistiveDiv === null || assistiveDiv === void 0 || assistiveDiv.removeAttribute('aria-live');
      assistiveDiv === null || assistiveDiv === void 0 || assistiveDiv.setAttribute('aria-live', 'polite');
    }
  }, [items, formatMessage]);
  var onChange = function onChange(_ref2) {
    var value = _ref2.target.value;
    onSearch(value);
  };
  var onFocus = function onFocus(_e) {
    setInputFocused(true);
  };
  var onBlur = function onBlur(_e) {
    setInputFocused(false);
  };
  var getFormattedMessage = function getFormattedMessage(itemsCount) {
    if (searchTerm === '') {
      return "".concat(formatMessage(commonMessages.assistiveTextDefault, {
        count: itemsCount
      }));
    }
    if (itemsCount > 1) {
      return "".concat(formatMessage(commonMessages.assistiveTextResult, {
        count: itemsCount
      }));
    }
    if (itemsCount === 1) {
      return "".concat(formatMessage(commonMessages.assistiveTextResult, {
        count: itemsCount
      }));
    }
    return formatMessage(commonMessages.assistiveTextResult, {
      count: itemsCount
    });
  };
  var assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
  var isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
  var ariaActiveDescendant = isInputNotFocusedAndItemSelected ? "searched-item-".concat(selectedItemIndex) : undefined;
  return (
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    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, {
        spacing: "spacious",
        label: "Advanced search",
        color: "var(--ds-icon-subtle, #505258)"
      })),
      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": formatMessage(commonMessages.searchAriaLabel),
      "aria-labelledby": fg('platform_editor_ally_remove_role_tabpanel') ? undefined : 'search-assistive',
      "aria-describedby": fg('platform_editor_ally_remove_role_tabpanel') ? 'search-assistive' : undefined
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: "js-search-input",
      role: "combobox",
      "aria-expanded": "true",
      "aria-controls": ariaControlsId,
      "aria-activedescendant": ariaActiveDescendant,
      value: searchTerm
    }), jsx("span", {
      id: "search-assistive",
      ref: assistiveTextRef,
      "aria-live": "polite",
      "aria-atomic": "true"
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: "assistive"
    }, assistiveMessage))
  );
}

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var styledShortcut = css(shortcutStyle, {
  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
  width: "var(--ds-space-600, 48px)"
});
var wrapper = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > [data-ds--text-field--container]': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    height: "".concat(GRID_SIZE * 6, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    borderRadius: "".concat(GRID_SIZE, "px"),
    flex: '1 1 100%',
    overflow: 'visible',
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '& > [data-ds--text-field--input]': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      fontSize: relativeFontSizeToBase16(14),
      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)", " 0")
    }
  }
});
var wrapperInline = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > [data-ds--text-field--container]': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    height: "40px",
    flex: 'none',
    overflow: 'revert'
  }
});
var elementBeforeInput = css({
  margin: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)", " 0 ", "var(--ds-space-100, 8px)"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  'span, svg': {
    height: '20px',
    width: '20px'
  }
});
var elementAfterInput = css({
  margin: "0 ".concat("var(--ds-space-100, 8px)"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  height: SEARCH_ITEM_HEIGHT_WIDTH,
  textAlign: 'center'
});
var MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
  component: 'Searchbar'
})(injectIntl(ElementSearch)));
export default MemoizedElementSearchWithAnalytics;