import { useStyles } from './style';
import { View } from 'react-native';
import { useUser } from '../../hooks';
import { ElementID } from '../../enums';
import useAuth from '../../../core/hooks/useAuth';
import { Typography } from '../../../core/components/Typography/Typography';
import AvatarElement from '../../elements/CommonElements/AvatarElement';
import { formatCount } from '../../../core/utils/time';
export function PollResults({
  options,
  totalVotes
}) {
  const {
    styles
  } = useStyles();
  const {
    client
  } = useAuth();
  const user = useUser(client.userId);
  const maxVoteCount = Math.max(...options.map(option => option.voteCount));
  const percentage = voteCount => +Math.min(totalVotes === 0 ? 0 : voteCount / totalVotes * 100, 100).toFixed(2);
  const voteBy = option => {
    const {
      voteCount,
      isVotedByUser
    } = option;
    if (voteCount === 0) return 'No votes';
    if (isVotedByUser) {
      const otherVotes = voteCount - 1;
      if (otherVotes === 0) return 'Voted by you';
      const formattedCount = formatCount(otherVotes);
      const plural = otherVotes > 1 ? 's' : '';
      return `Voted by ${formattedCount} participant${plural} and you`;
    }
    const formattedCount = formatCount(voteCount);
    const plural = voteCount > 1 ? 's' : '';
    return `Voted by ${formattedCount} participant${plural}`;
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.pollResults
  }, options.map(option => {
    const isHighestVote = option.voteCount === maxVoteCount && maxVoteCount > 0;
    return /*#__PURE__*/React.createElement(View, {
      key: option.id,
      style: [styles.optionResult, isHighestVote && styles.topOptionResult]
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.optionResultHeader
    }, /*#__PURE__*/React.createElement(Typography.BodyBold, {
      style: styles.optionResultLabel
    }, option.data), /*#__PURE__*/React.createElement(Typography.BodyBold, {
      style: [styles.optionResultPercentage, isHighestVote && styles.topOptionResultPercentage]
    }, percentage(option.voteCount), "%")), /*#__PURE__*/React.createElement(View, {
      style: styles.optionResultVoters
    }, /*#__PURE__*/React.createElement(Typography.Caption, {
      style: styles.baseShade2
    }, voteBy(option)), option.isVotedByUser && /*#__PURE__*/React.createElement(AvatarElement, {
      targetType: "user",
      style: styles.optionAvatar,
      avatarId: user === null || user === void 0 ? void 0 : user.avatarFileId,
      avatarCustomUrl: user === null || user === void 0 ? void 0 : user.avatarCustomUrl,
      elementID: ElementID.WildCardElement,
      displayName: user === null || user === void 0 ? void 0 : user.displayName
    })), /*#__PURE__*/React.createElement(View, {
      style: [styles.optionResultProgressBar, isHighestVote && styles.topOptionResultProgressBar]
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.optionResultProgressBarLength, isHighestVote && styles.topOptionResultProgressBarLength, {
        width: `${percentage(option.voteCount)}%`
      }]
    })));
  }));
}
//# sourceMappingURL=PollResults.js.map