import { Text, TouchableOpacity, View } from 'react-native';
import { memo, useCallback, useMemo, useState, useEffect } from 'react';
import { useStyles } from '../style';
import { SvgXml } from 'react-native-svg';
import { radioOff, radioOn } from '../../../../../core/assets/icons/xml';
import PollBar from './PollBar';
const PollOptionList = ({
  options: data = [],
  answerType,
  isAlreadyVoted,
  isPollClosed,
  totalVote,
  onSubmit
}) => {
  var _ref;
  const styles = useStyles();
  const [options, setOptions] = useState(data.slice(0, 2) || []);
  const [selectedOption, setSelectedOption] = useState([]);
  const hiddenOptions = (data === null || data === void 0 ? void 0 : data.length) - ((_ref = [...options]) === null || _ref === void 0 ? void 0 : _ref.length) || 0;
  const showedAllOptions = hiddenOptions === 0;
  const isSingleOption = answerType === 'single';
  useEffect(() => {
    setOptions(data.slice(0, 2));
  }, [data]);
  const onPressMoreOption = useCallback(() => {
    setOptions([...data]);
  }, [data]);
  const onPressOption = useCallback(optionId => {
    if (isSingleOption) return setSelectedOption([optionId]);
    const currentSelectedOptions = [...selectedOption];
    const index = currentSelectedOptions.findIndex(id => id === optionId);
    if (index !== -1) {
      currentSelectedOptions.splice(index, 1);
    } else {
      currentSelectedOptions.push(optionId);
    }
    setSelectedOption([...currentSelectedOptions]);
  }, [isSingleOption, selectedOption]);
  const renderSubmitButton = useMemo(() => {
    if (isPollClosed || isAlreadyVoted) return null;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: selectedOption.length === 0,
      onPress: () => onSubmit(selectedOption),
      style: styles.submitBtn
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.submit
    }, "Submit"));
  }, [isPollClosed, isAlreadyVoted, styles, onSubmit, selectedOption]);
  const renderViewAllOptions = useMemo(() => {
    const resultText = isPollClosed || isAlreadyVoted ? `View full results` : `${hiddenOptions} more options`;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: onPressMoreOption,
      style: styles.moreOptionsBtn
    }, /*#__PURE__*/React.createElement(Text, null, resultText));
  }, [hiddenOptions, isPollClosed, isAlreadyVoted, onPressMoreOption, styles.moreOptionsBtn]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => {
    const selectedItem = selectedOption.includes(option.id);
    const selectedIcon = selectedItem ? radioOn() : radioOff();
    const selectedOptionContainerStyle = selectedItem && styles.selectedOptionContainer;
    const selectedVoteCountStyle = (isAlreadyVoted || isPollClosed) && option.isVotedByUser && styles.selectedVoteCount;
    const lengthPercentage = option.voteCount / totalVote * 100;
    const length = isNaN(lengthPercentage) ? 0 : lengthPercentage;
    const onResultOptionStyle = (isAlreadyVoted || isPollClosed) && option.isVotedByUser && styles.onResultOption;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: isPollClosed || isAlreadyVoted,
      key: `${option.id}${option.isVotedByUser}`,
      style: [styles.pollOptionContainer, selectedOptionContainerStyle, onResultOptionStyle],
      onPress: () => onPressOption(option.id)
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.pollOptionContainerRow
    }, !isPollClosed && !isAlreadyVoted && /*#__PURE__*/React.createElement(SvgXml, {
      xml: selectedIcon,
      width: "20",
      height: "20"
    }), /*#__PURE__*/React.createElement(Text, {
      style: styles.optionText
    }, option.data)), (isPollClosed || isAlreadyVoted) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PollBar, {
      myVote: option.isVotedByUser,
      length: length
    }), /*#__PURE__*/React.createElement(Text, {
      style: [styles.voteCount, selectedVoteCountStyle]
    }, option.voteCount, " votes")));
  }), showedAllOptions ? renderSubmitButton : renderViewAllOptions);
};
export default /*#__PURE__*/memo(PollOptionList);
//# sourceMappingURL=PollOptionList.js.map