import { Radio } from '../../../core/components/Radio';
import { useStyles } from './style';
import { CheckBox } from '../../../core/components/CheckBox';
import { PollResults } from './PollResults';
import { Typography } from '../../../core/components/Typography/Typography';
import { TouchableOpacity, View } from 'react-native';
import { useState } from 'react';
import Button, { BUTTON_SIZE } from '../Button/Button';
import { useNavigation } from '@react-navigation/native';
export function PollOptions({
  post,
  options,
  votePoll,
  totalVotes,
  answerType,
  isPollClosed,
  isAlreadyVoted,
  showedAllOptions,
  disabledPoll,
  isAuthorSeeingResults
}) {
  const DEFAULT_DISPLAY_OPTIONS = 4;
  const isSingleOption = answerType === 'single';
  const hiddenOptions = options.length - DEFAULT_DISPLAY_OPTIONS;
  const navigation = useNavigation();
  const {
    styles
  } = useStyles();
  const [selectedOption, setSelectedOption] = useState([]);
  const btnDisabled = selectedOption.length === 0;
  const optionDisabled = !!disabledPoll;
  return /*#__PURE__*/React.createElement(View, null, isPollClosed || isAlreadyVoted || isAuthorSeeingResults ? /*#__PURE__*/React.createElement(PollResults, {
    options: [...options].sort((a, b) => b.voteCount - a.voteCount).slice(0, showedAllOptions ? options.length : 4),
    totalVotes: totalVotes
  }) : isSingleOption ? /*#__PURE__*/React.createElement(Radio.Group, {
    value: selectedOption[0],
    style: styles.optionGroup,
    disabled: optionDisabled,
    onChange: value => setSelectedOption([value]),
    select: (value, option) => value.id === option.id
  }, options.slice(0, showedAllOptions ? options.length : DEFAULT_DISPLAY_OPTIONS).map(option => /*#__PURE__*/React.createElement(Radio.Option, {
    value: option,
    key: option.id,
    style: ({
      selected
    }) => [styles.option, selected && styles.optionSelected]
  }, /*#__PURE__*/React.createElement(Radio.Label, {
    style: styles.optionLabel
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
    style: [optionDisabled && styles.optionLabelDisabled]
  }, option.data)), /*#__PURE__*/React.createElement(Radio.Icon, null)))) : /*#__PURE__*/React.createElement(CheckBox.Group, {
    value: selectedOption,
    style: styles.optionGroup,
    disabled: optionDisabled,
    onChange: value => setSelectedOption(value),
    select: (value, option) => !!value.find(item => item.id === option.id),
    extractKey: value => value.id
  }, options.slice(0, showedAllOptions ? options.length : DEFAULT_DISPLAY_OPTIONS).map(option => /*#__PURE__*/React.createElement(CheckBox.Option, {
    value: option,
    key: option.id,
    style: ({
      selected
    }) => [styles.option, selected && styles.optionSelected]
  }, /*#__PURE__*/React.createElement(CheckBox.Label, {
    style: styles.optionLabel
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
    style: [optionDisabled && styles.optionLabelDisabled]
  }, option.data)), /*#__PURE__*/React.createElement(CheckBox.Icon, null)))), !showedAllOptions && hiddenOptions > 0 && /*#__PURE__*/React.createElement(Button, {
    type: "secondary",
    size: BUTTON_SIZE.LARGE,
    style: styles.seeMoreOptionsBtn,
    onPress: () => navigation.navigate('PostDetail', {
      postId: post.postId
    })
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, null, isPollClosed || isAlreadyVoted ? `See full results` : `See ${hiddenOptions} more options`)), !isPollClosed && !isAlreadyVoted && /*#__PURE__*/React.createElement(TouchableOpacity, {
    disabled: btnDisabled || optionDisabled,
    style: [styles.voteBtn, (btnDisabled || optionDisabled) && styles.voteBtnDisabled],
    onPress: () => votePoll(selectedOption.map(option => option.id))
  }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
    style: styles.voteBtnLabel
  }, "Vote")));
}
//# sourceMappingURL=PollOption.js.map