"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.getAutoCompleterUI = getAutoCompleterUI;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _backgroundView = _interopRequireDefault(require("./background-view"));
var _getDefaultUseItems = _interopRequireDefault(require("./get-default-use-items"));
var _style = _interopRequireDefault(require("./style.scss"));
var _icon = _interopRequireDefault(require("../icon"));
var _autocompletionItems = require("../mobile/autocompletion-items");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  compose: stylesCompose
} = _reactNative.StyleSheet;
function getAutoCompleterUI(autocompleter) {
  const useItems = autocompleter.useItems ? autocompleter.useItems : (0, _getDefaultUseItems.default)(autocompleter);
  function AutocompleterUI({
    filterValue,
    selectedIndex,
    onChangeOptions,
    onSelect,
    value,
    reset
  }) {
    const [items] = useItems(filterValue);
    const filteredItems = items.filter(item => !item.isDisabled);
    const scrollViewRef = (0, _element.useRef)();
    const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
    const [isVisible, setIsVisible] = (0, _element.useState)(false);
    const {
      text
    } = value;
    (0, _element.useEffect)(() => {
      if (!isVisible && text.length > 0) {
        setIsVisible(true);
      }
    }, [isVisible, text]);
    (0, _element.useLayoutEffect)(() => {
      onChangeOptions(items);
      scrollViewRef.current?.scrollTo({
        x: 0,
        animated: false
      });
      if (isVisible && text.length > 0) {
        startAnimation(true);
      } else if (isVisible && text.length === 0) {
        startAnimation(false);
      }
      // We want to avoid introducing unexpected side effects.
      // See https://github.com/WordPress/gutenberg/pull/41820
    }, [items, isVisible, text]);
    const activeItemStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__item-active'], _style.default['components-autocomplete__item-active-dark']);
    const iconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon'], _style.default['components-autocomplete__icon-active-dark']);
    const activeIconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon-active '], _style.default['components-autocomplete__icon-active-dark']);
    const textStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__text'], _style.default['components-autocomplete__text-dark']);
    const activeTextStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__text-active'], _style.default['components-autocomplete__text-active-dark']);
    const startAnimation = (0, _element.useCallback)(show => {
      _reactNative.Animated.timing(animationValue, {
        toValue: show ? 1 : 0,
        duration: show ? 200 : 100,
        useNativeDriver: true
      }).start(({
        finished
      }) => {
        if (finished && !show && isVisible) {
          setIsVisible(false);
          reset();
        }
      });
    },
    // We want to avoid introducing unexpected side effects.
    // See https://github.com/WordPress/gutenberg/pull/41820
    [isVisible]);
    const contentStyles = {
      transform: [{
        translateY: animationValue.interpolate({
          inputRange: [0, 1],
          outputRange: [_style.default['components-autocomplete'].height, 0]
        })
      }]
    };
    if (!filteredItems.length > 0 || !isVisible) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_autocompletionItems.__unstableAutocompletionItemsFill, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _style.default['components-autocomplete'],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
          style: contentStyles,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_backgroundView.default, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
              testID: "autocompleter",
              ref: scrollViewRef,
              horizontal: true,
              contentContainerStyle: _style.default['components-autocomplete__content'],
              showsHorizontalScrollIndicator: false,
              keyboardShouldPersistTaps: "always",
              accessibilityLabel:
              // translators: Slash inserter autocomplete results
              (0, _i18n.__)('Slash inserter results'),
              children: filteredItems.map((option, index) => {
                const isActive = index === selectedIndex;
                const itemStyle = stylesCompose(_style.default['components-autocomplete__item'], isActive && activeItemStyles);
                const textStyle = stylesCompose(textStyles, isActive && activeTextStyles);
                const iconStyle = stylesCompose(iconStyles, isActive && activeIconStyles);
                const iconSource = option?.value?.icon?.src || option?.value?.icon;
                return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
                  activeOpacity: 0.5,
                  style: itemStyle,
                  onPress: () => onSelect(option),
                  accessibilityLabel: (0, _i18n.sprintf)(
                  // translators: %s: Block name e.g. "Image block"
                  (0, _i18n.__)('%s block'), option?.value?.title),
                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                    style: _style.default['components-autocomplete__icon'],
                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
                      icon: iconSource,
                      size: 24,
                      style: iconStyle
                    })
                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                    style: textStyle,
                    children: option?.value?.title
                  })]
                }, index);
              })
            })
          })
        })
      })
    });
  }
  return AutocompleterUI;
}
var _default = exports.default = getAutoCompleterUI;
//# sourceMappingURL=autocompleter-ui.native.js.map