"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PollOptions = PollOptions;
var _reactNative = require("react-native");
var _reactNativeSvg = require("react-native-svg");
var _icons = require("../../../../../core/assets/icons");
var _Typography = require("../../../../../core/components/Typography/Typography");
var _constants = require("../../../../../core/constants");
var _PollPostComposer = require("../PollPostComposer");
var _styles = require("../styles");
var _FormLabel = _interopRequireDefault(require("../../../../elements/FormLabel"));
var _enums = require("../../../../enums");
var _FormDescription = _interopRequireDefault(require("../../../../elements/FormDescription"));
var _AddOptionButton = _interopRequireDefault(require("../../../../elements/AddOptionButton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PollOptions({
  onPressAddOption,
  onPressRemoveOption,
  onChangeOptionText
}) {
  const {
    styles,
    theme
  } = (0, _styles.useStyles)();
  const {
    pollOptions
  } = (0, _PollPostComposer.usePollPostComposerContext)();
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.fieldContainer
  }, /*#__PURE__*/React.createElement(_FormLabel.default, {
    style: styles.base,
    pageId: _enums.PageID.poll_post_composer_page,
    elementId: _enums.ElementID.poll_options_title
  }), /*#__PURE__*/React.createElement(_FormDescription.default, {
    style: styles.baseShade1,
    pageId: _enums.PageID.poll_post_composer_page,
    elementId: _enums.ElementID.poll_options_desc
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.optionsContainer
  }, pollOptions.map((pollOption, index) => {
    const onReachMaxChar = pollOption.data.length > _constants.MAX_POLL_ANSWER_LENGTH;
    return /*#__PURE__*/React.createElement(_reactNative.View, {
      key: `Option ${index + 1}`
    }, /*#__PURE__*/React.createElement(_reactNative.View, {
      style: styles.pollOptionContainer
    }, /*#__PURE__*/React.createElement(_reactNative.View, {
      style: [styles.pollOptionInputContainer, onReachMaxChar && styles.pollOptionInputContainerError]
    }, /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
      width: "20",
      height: "20",
      xml: (0, _icons.trash)(),
      color: theme.colors.base,
      onPress: () => onPressRemoveOption(index)
    }))), onReachMaxChar && /*#__PURE__*/React.createElement(_Typography.Typography.Caption, {
      style: styles.errorText
    }, "Poll option cannot exceed ", _constants.MAX_POLL_ANSWER_LENGTH, " characters."));
  }), pollOptions.length < 10 && /*#__PURE__*/React.createElement(_AddOptionButton.default, {
    onPress: onPressAddOption,
    pageId: _enums.PageID.poll_post_composer_page
  })));
}
//# sourceMappingURL=PollOptions.js.map