import React, { Component } from "react";
import style from "styled-components";
import { candidates } from "../constants";
import { Card, Image, Form, Rating } from "semantic-ui-react";

const Header = style.h5`
  padding-top: 10px;
`;

const PreferencesContainer = style.ol`
  margin-top: -1rem;
  padding-left: 1.0rem;
`;

const RadioButton = style(Form.Radio)`
  text-align: center;
`;

const ImageResized = style(Image)`
  height: 500px;
  width: 100%;
  object-fit: cover;
`;

class Candidate extends Component {
	constructor(props) {
		super(props);
		this.state = {
			color: null,
			rate: {},
		};
	}

	handleSelect = (e, { value }) => {
		const { onSelect, candidateName } = this.props;
		onSelect(candidateName);
	};

	handleRate = (e, { rating }) => {
		const { onSelect, candidateName } = this.props;
		const currRate = {
			[candidateName]: rating,
		};
		this.setState({
			rate: currRate,
		});
		onSelect(currRate);
	};

	getCandidateDetails = (name) => {
		const candidateInfo = candidates[name];
		return candidateInfo;
	};

	renderRadioMethod = (candidateName, currSelection) => {
		return (
			<RadioButton
				name="radioGroup"
				onChange={this.handleSelect}
				checked={candidateName === currSelection}
			/>
		);
	};

	renderRateMethod = () => {
		return <Rating icon="star" onRate={this.handleRate} maxRating={3} size="massive" />;
	};

	render() {
		const { candidateName, currSelection, reelect, voteMethod } = this.props;
		const candidateInfo = this.getCandidateDetails(reelect ? candidateName : candidateName);
		const { photoSrc, preferences } = candidateInfo || {};
		const { color } = this.state;
		const abstainCard = candidateName === "Abstain";

		return (
			<Card color={color}>
				<ImageResized src={photoSrc} />
				<Card.Content>
					<Card.Header textAlign="center">{candidateName}</Card.Header>
					{!reelect ? (
						<Card.Meta>
							<Header>
								{abstainCard ? "I formally decline to vote for any candidates." : "Preferences:"}
							</Header>
							<PreferencesContainer>
								{preferences ? preferences.map((position, i) => <li key={i}>{position}</li>) : null}
							</PreferencesContainer>
						</Card.Meta>
					) : null}
				</Card.Content>
				<Card.Content extra textAlign="center">
					{voteMethod === "rate"
						? this.renderRateMethod(candidateName, currSelection)
						: this.renderRadioMethod(candidateName, currSelection)}
				</Card.Content>
			</Card>
		);
	}
}

export default Candidate;