import { Component } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
import { ApiService } from '../services/api.service';

@Component({
	selector: 'app-prediction-delta',
	templateUrl: './prediction-delta.component.html',
	styleUrls: ['./prediction-delta.component.scss'],
	animations: [
		trigger(
			'inOut', [
				transition(':enter', [
					style({height: 0, opacity: 0}),
					animate('0.5s ease-out', style({height: '*', opacity: 1}))
				]),
				transition(':leave', [
					style({height: '*', opacity: 1}),
					animate('0.5s ease-in', style({height: 0, opacity: 0}))
				])
			]
		)
	]
})
export class PredictionDeltaComponent {

	nameA: String;
	nameB: String;
	delta: Number;

	constructor(
		private api: ApiService,
	) {}

	// Compares the two predictions
	compare() {
		let data = { nameA: this.nameA, nameB: this.nameB };
		this.api.post<Number>('/prediction/compare', data, result => {
			this.delta = result;
		});
	}
}