import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
import {FormControl, FormGroup, NgForm, Validators} from '@angular/forms';
import {LoanModel} from '../../models/loan.model';
import {LoanSingleService} from '../../service/loan.single.service';
import {HttpErrorResponse} from '@angular/common/http';


@Component({
  selector: 'app-loan-basic-info',
  templateUrl: './basicinfo.component.html',
  styleUrls: ['./basicinfo.component.scss']
})
export class BasicinfoComponent implements OnInit {

  constructor( private service: LoanSingleService) { }

  @Input() Loan: LoanModel;
  @Output() NotifyNext = new EventEmitter<boolean>();
  @Output()  errorOccurred = new EventEmitter<string>();

  public minSettlement: Date = new Date(2015, 0, 1);
  public maxSettlement: Date = new Date(2030, 4, 31);

  public DemoDescription = `
       <h1> Rich Text Editing </h1>
       <table>
       <tr> <td>
              <ol>
                <li>Text formatting</li>
                <li>Bulleted and numbered lists</li>
                <li>Hyperlinks</li>
                <li>Cross-browser support</li>
                <li>Identical HTML output across browsers</li>
              </ol>
          </td> <td width="20%" text-align="right">
                <img src="https://edge.alluremedia.com.au/uploads/businessinsider/2015/05/P2P-to-date.jpg"
                width=300">
            </td>
        </tr>
   </table>
    `;

  public listLoanStatus: Array<{text: string, value: string}> = [
    {text: '1 - Processing:   Just received from Client', value: 'Processing'} ,
    {text: '2 - Valuation :   Valuating From Bank', value: 'Valuation'},
    {text: '3 - Application in Progress:   Application Submitted', value: 'Application in Progress'},
    {text: '4 - Approved :   Approved by lender', value: 'Approved' },
    {text: '5 - Settled :   Settlement date finalized.', value: 'Settled'},
    {text: '6 - Finished :   Fully paid, terminated, or switched)', value: 'Finished'},
  ];

  ngOnInit(): void {
  }

  public next(basicInfoForm: NgForm): void {

    if ( ! basicInfoForm.valid ) {
      basicInfoForm.form.markAllAsTouched();
      this.errorOccurred.emit('Please check your input, there are some errors');
      return ;
    }

    this.service.updateBasicInfo(this.Loan).subscribe(
      resp => {
        if ( this.Loan.Id === '' ) {
          this.Loan.Id = resp.Id;
        }
        this.NotifyNext.emit(true);
      },
      err => {
        const msg = err instanceof HttpErrorResponse ? err.statusText : '';
        this.errorOccurred.emit('Network Error Occurred : ' + err.statusText);
        this.NotifyNext.emit(false);
      }
    );
  }

  public showDemoDescription($event): void{
    this.Loan.Description = this.DemoDescription;
  }

}
