import { View, TextInput } from 'react-native';
import { SvgXml } from 'react-native-svg';
import { trash } from '../../../../../core/assets/icons';
import { Typography } from '../../../../../core/components/Typography/Typography';
import { MAX_POLL_ANSWER_LENGTH } from '../../../../../core/constants';
import { usePollPostComposerContext } from '../PollPostComposer';
import { useStyles } from '../styles';
import FormLabel from '../../../../elements/FormLabel';
import { ElementID, PageID } from '../../../../enums';
import FormDescription from '../../../../elements/FormDescription';
import AddOptionButton from '../../../../elements/AddOptionButton';
export function PollOptions({
  onPressAddOption,
  onPressRemoveOption,
  onChangeOptionText
}) {
  const {
    styles,
    theme
  } = useStyles();
  const {
    pollOptions
  } = usePollPostComposerContext();
  return /*#__PURE__*/React.createElement(View, {
    style: styles.fieldContainer
  }, /*#__PURE__*/React.createElement(FormLabel, {
    style: styles.base,
    pageId: PageID.poll_post_composer_page,
    elementId: ElementID.poll_options_title
  }), /*#__PURE__*/React.createElement(FormDescription, {
    style: styles.baseShade1,
    pageId: PageID.poll_post_composer_page,
    elementId: ElementID.poll_options_desc
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.optionsContainer
  }, pollOptions.map((pollOption, index) => {
    const onReachMaxChar = pollOption.data.length > MAX_POLL_ANSWER_LENGTH;
    return /*#__PURE__*/React.createElement(View, {
      key: `Option ${index + 1}`
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.pollOptionContainer
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.pollOptionInputContainer, onReachMaxChar && styles.pollOptionInputContainerError]
    }, /*#__PURE__*/React.createElement(TextInput, {
      multiline: true,
      style: styles.pollOptionInput,
      value: pollOptions[index].data,
      placeholder: `Option ${index + 1}`,
      placeholderTextColor: theme.colors.baseShade3,
      onChangeText: text => onChangeOptionText(text, index)
    })), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(SvgXml, {
      width: "20",
      height: "20",
      xml: trash(),
      color: theme.colors.base,
      onPress: () => onPressRemoveOption(index)
    }))), onReachMaxChar && /*#__PURE__*/React.createElement(Typography.Caption, {
      style: styles.errorText
    }, "Poll option cannot exceed ", MAX_POLL_ANSWER_LENGTH, " characters."));
  }), pollOptions.length < 10 && /*#__PURE__*/React.createElement(AddOptionButton, {
    onPress: onPressAddOption,
    pageId: PageID.poll_post_composer_page
  })));
}
//# sourceMappingURL=PollOptions.js.map