import { Component, ElementRef, Input } from '@angular/core';
import { ConfigService } from '../../../services/config.service';

interface VoteChoice {
	votes?: {
		yes: number;
		no: number;
		maybe: number;
		notAnswered: number;
	};
	name?: string;
	date?: Date;
	answer: 'yes' | 'no' | 'maybe' | null;
	simpleAnswer?: boolean;
	false; // enable if we display only a togglable "yes"
}

/**
 * each vote choice takes a configuration from the container of all choices.
 * this component is used to select a date choice, or a choice_label answer
 */
@Component({
	selector: 'app-voting-choice',
	templateUrl: './voting-choice.component.html',
	styleUrls: ['./voting-choice.component.scss'],
})
export class VotingChoiceComponent {
	public showChangeChoicebutton = false;
	@Input() public choice: any;
	@Input() public choices_count: any;
	@Input() public choice_id: any;
	@Input() public poll: any;
	@Input() public simpleAnswer = true;
	@Input() public pollIsSpecialDate = false;

	constructor(private el: ElementRef, private config: ConfigService) {
		if (this.poll && this.poll.allowedAnswers) {
			this.simpleAnswer = this.poll.allowedAnswers.length == 1;
		}
	}

	setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) {
		if (this.simpleAnswer) {
			// only toggle yes to no
			if (this.choice.answer && this.choice.answer === 'yes') {
				this.choice.answer = 'no';
				this.config.myTempVoteStack--;
			} else {
				this.choice.answer = newAnswer;
				this.config.myTempVoteStack++;
			}
		} else {
			this.choice.answer = newAnswer;
			if (this.choice.answer !== newAnswer) {
				if (newAnswer == 'maybe' || newAnswer == 'yes') {
					this.config.myTempVoteStack++;
				}
			} else {
				console.info('same answer as before');
			}
		}
		this.el.nativeElement.blur();
	}
}