import _noop from "lodash/fp/noop";
import React, { useState, useEffect, useMemo } from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import { useTemplateContext } from '../../../template/app-review/template-context';
import Modal from '../index.native';
import ModalSelectItem from '../select-item/index.native';
const createStyleSheet = theme => StyleSheet.create({
  content: {
    paddingHorizontal: 0
  },
  separator: {
    borderTopWidth: 1,
    borderColor: theme.colors.border
  },
  list: {
    width: '100%'
  }
});
const keyExtractor = (item, index) => {
  return `modal-select-item-${index + 1}`;
};
const createRenderItem = (value, testID, onChange) => function Item({
  item,
  index
}) {
  // eslint-disable-next-line unicorn/consistent-function-scoping
  const handleChange = _value => () => onChange(_value);
  return /*#__PURE__*/React.createElement(ModalSelectItem, {
    onPress: handleChange(item.text),
    isSelected: value === item.text,
    testID: `${testID}-item-${index + 1}`
  }, item.text);
};
const createSeparator = styleSheet => function Separator() {
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet?.separator
  });
};
const ModalSelect = props => {
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    theme
  } = templateContext;
  const {
    value = '',
    values,
    onChange,
    onClose = _noop,
    testID = 'modal-select'
  } = props;
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [value, testID, onChange]);
  const renderSeparator = useMemo(() => styleSheet ? createSeparator(styleSheet) : null, [styleSheet]);
  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Modal, {
    onClose: onClose,
    contentStyle: styleSheet?.content,
    testID: testID
  }, /*#__PURE__*/React.createElement(FlatList, {
    data: values,
    renderItem: renderItem,
    keyExtractor: keyExtractor,
    showsVerticalScrollIndicator: false,
    ItemSeparatorComponent: renderSeparator,
    style: styleSheet?.list,
    testID: `${testID}-items`
  }));
};
export default ModalSelect;
//# sourceMappingURL=index.native.js.map