import { Router } from '@angular/router';
import { MatDialogConfig } from '@angular/material';
import { OkPopupComponent } from '../popups/ok-popup/ok-popup.component';
import { EmailService } from '../../services/email.service';
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';


@Component({
  selector: 'app-contact-page',
  templateUrl: './balloon.component.html',
  styleUrls: ['./balloon.component.css']
})
export class BalloonComponent implements OnInit {
  public submitButtonText: string = "Submit";
  public submitButtonDisabled: boolean = false;
  public formSubmitted: boolean = false;

  public name: string;
  public email: string;
  public location: string;
  public phone: string;
  public body: string;
  public hp: string = ".";

  public errorMessages: string[] = [];


  constructor(private emailService: EmailService, 
              private MatDialog: MatDialog,
              private router: Router) { }

  ngOnInit() {
  }

  onSubmit(){
    this.errorMessages = [];
    if (this.name == null || this.name == ""){
      this.errorMessages.push("Please enter a name");
    }
    if (this.location == null || this.location == ""){
      this.errorMessages.push("Please enter a city and state");
    }
    if (this.errorMessages.length > 0){ return; }

    const body = `Location of balloon: ${this.location}\n${this.body}`;
    let email = this.email;
    if (!email || email.length === 0) {
      email = 'N/A';
    }

    this.submitButtonText = "Please Wait...";
    this.submitButtonDisabled = true;
    this.emailService.sendEmail(this.name,
                                email,
                                this.phone,
                                body,
                                this.hp)
                      .subscribe(
                        success => {this.emailSuccess();},
                        error => {this.emailError();});
  }

  private emailSuccess(){
    let opts = new MatDialogConfig;
    opts.data = { title:'Email Sent','message':'Thank You! Your message has been sent.' };
    let popup = this.MatDialog.open(OkPopupComponent,opts);
    this.submitButtonText = "Submit";
    this.submitButtonDisabled = false;
    popup.afterClosed().subscribe(()=>{
      this.formSubmitted = true;
    });
  }

  private emailError(){
    console.error("error");
    let opts = new MatDialogConfig;
    opts.data = { title:'Email Error','message':'Please make sure that you have entered a valid email address.' };
    let popup = this.MatDialog.open(OkPopupComponent,opts);
    this.submitButtonText = "Submit";
    this.submitButtonDisabled = false;
  }

}