import { Component } from '@angular/core';
import { NavController ,ToastController} from 'ionic-angular';
import { AdditionProvider } from '../../providers/addition/addition';


const HTML_TEMPLATE = `
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  

  <ion-item>
    <ion-label color="primary" stacked>Value of A
    </ion-label>
    <ion-input type="number" placeholder="enter value" [(ngModel)]="value.a">
    </ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Value of B</ion-label>
    <ion-input type="number" placeholder="enter value" [(ngModel)]="value.b"></ion-input>
  </ion-item>

  <button ion-button color="secondary" (click)="Add()">Addition</button>

  <ion-item>
    <ion-label color="primary" stacked>{{ data }}</ion-label>
  </ion-item>

</ion-content>
`;

const CSS_STYLE = `
.special-text {
    font-weight: 800;
    font-size: 15pt;
    text-align: center;
    color: #0000FF;
}
`;


@Component({
  selector: 'page-home',
  template: HTML_TEMPLATE
})

export class HomePage {

	value = 
	{
		a : '',
		b : ''
	}

	data: number;

  constructor(public navCtrl: NavController,
  				public adder : AdditionProvider,
  				private toastCtrl: ToastController) {

  }

  	Add()
  	{	
  		console.log(this.value);
  		 
  		this.data = parseInt(this.value.a) + parseInt(this.value.b); 
		this.adder.Addition(this.value);
		this.presentToast();
	}

	presentToast() {
	  let toast = this.toastCtrl.create({
	    message: 'User was added successfully',
	    duration: 3000,
	    position: 'top'
	  });

	  toast.onDidDismiss(() => {
	    console.log('Dismissed toast');
	  });

	  toast.present();
	}

}
