// @flow

import React from 'react';

import AbstractPollResults from '../AbstractPollResults';
import type { AbstractProps } from '../AbstractPollResults';


/**
 * Component that renders the poll results.
 *
 * @param {Props} props - The passed props.
 * @returns {React.Node}
 */
const PollResults = (props: AbstractProps) => {
    const {
        answers,
        changeVote,
        haveVoted,
        showDetails,
        question,
        t,
        toggleIsDetailed
    } = props;

    return (
        <div className = 'poll-results'>
            <div className = 'poll-header'>
                <div className = 'poll-question'>
                    <strong>{ question }</strong>
                </div>
            </div>
            <ol className = 'poll-result-list'>
                {answers.map(({ name, percentage, voters, voterCount }, index) =>
                    (<li key = { index }>
                        <div className = 'poll-answer-header'>
                            <span className = 'poll-answer-vote-name' >{name}</span>
                        </div>
                        <div className = 'poll-answer-short-results'>
                            <span className = 'poll-bar-container'>
                                <div
                                    className = 'poll-bar'
                                    style = {{ width: `${percentage}%` }} />
                            </span>
                            <div className = 'poll-answer-vote-count-container'>
                                <span className = 'poll-answer-vote-count'>({voterCount}) {percentage}%</span>
                            </div>
                        </div>
                        { showDetails && voters && voterCount > 0
                            && <ul className = 'poll-answer-voters'>
                                {voters.map(voter =>
                                    <li key = { voter.id }>{voter.name}</li>
                                )}
                            </ul>}
                    </li>)
                )}
            </ol>
            <div className = { 'poll-result-links' }>
                <a
                    className = { 'poll-detail-link' }
                    onClick = { toggleIsDetailed }>
                    {showDetails ? t('polls.results.hideDetailedResults') : t('polls.results.showDetailedResults')}
                </a>
                <a
                    className = { 'poll-change-vote-link' }
                    onClick = { changeVote }>
                    {haveVoted ? t('polls.results.changeVote') : t('polls.results.vote')}
                </a>
            </div>
        </div>
    );

};

/*
 * We apply AbstractPollResults to fill in the AbstractProps common
 * to both the web and native implementations.
 */
// eslint-disable-next-line new-cap
export default AbstractPollResults(PollResults);