import { Router } from '@angular/router';
import { MdDialogConfig } 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 { MdDialog } from '@angular/material';

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

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

  public errorMessages: string[] = [];


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

  ngOnInit() {
  }

  onSubmit(){
    this.errorMessages = [];
    if (this.name == null || this.name == ""){
      this.errorMessages.push("Please enter a name");
    }
    if (this.email == null || this.email == ""){
      this.errorMessages.push("Please enter an email address");
    }
    if (this.body == null || this.body == ""){
      this.errorMessages.push("Please enter a message");
    }
    if (this.errorMessages.length > 0){ return; }

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

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

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

}