import {Component, ElementRef, Input} from '@angular/core';

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 name answer
 */
@Component({
    selector: 'framadate-vote-choice',
    templateUrl: './vote-choice.component.html',
    styleUrls: ['./vote-choice.component.scss']
})
export class VoteChoiceComponent {

    public showChangeChoicebutton = false;
    @Input() public choice: any;
    @Input() public poll: any;
    @Input() public simpleAnswer: boolean = true;
    @Input() public pollIsSpecialDate: boolean = false;

    constructor(private el: ElementRef) {

        if (this.poll && this.poll.data && this.poll.data.allowedAnswers) {
            this.simpleAnswer = this.poll.data.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';
            } else {
                this.choice.answer = 'yes';
            }

        } else {
            this.choice.answer = newAnswer;
        }
        this.el.nativeElement.blur();
    }

}