<div class="app-step-applications">
  <!-- <progressbar class="pw-progressbar" tooltip="100%" placement="bottom" [value]="100"></progressbar> -->
  <form nestableForm #completeForm="ngForm">
    <div *ngIf="nameReservationForm" class="py-3 px-3 px-md-5">
      <accordion [closeOthers]="true" class="pw-accordion pw-accordion--steps expand-panel pw-accordion--full-screen-sm" #applicationSteps>
        <accordion-group *ngIf="sectionNumberForSectionType(NameReservationSectionTypes.APPLICANT_CONTACT_DETAILS); let currentSectionNumber" #group1 [isOpen]="true" [class.completed]="f1.valid && hasInput(f1)" [class.optional]="f1.valid && !hasInput(f1)" (isOpenChange)="accordionSetBodyClass($event, f1)">
          <app-section-heading accordion-heading [sectionNumber]="currentSectionNumber" sectionName="Applicant's Contact Details"></app-section-heading>
          <app-section [number]="currentSectionNumber" [sectionGroup]="group1" (onChange)="selectSection($event)" (onSave)="save()" (onFinish)="review()" finishLabel="Review">
            <form nestableForm #f1="ngForm">
              <app-applicants-contact-details-section [representative]="nameReservationForm.documentSignature.representative"></app-applicants-contact-details-section>
            </form>
          </app-section>
        </accordion-group>
        <accordion-group *ngIf="sectionNumberForSectionType(NameReservationSectionTypes.COMPANY_NAMES); let currentSectionNumber" #group2 [class.completed]="f2.valid && hasInput(f2)" [class.optional]="f2.valid && !hasInput(f2)" (isOpenChange)="accordionSetBodyClass($event, f2)">
          <app-section-heading accordion-heading [sectionNumber]="currentSectionNumber" sectionName="Information on a proposed name"></app-section-heading>
          <app-section [last]="currentSectionNumber === numberOfSections" [number]="currentSectionNumber" [sectionGroup]="group2" (onChange)="selectSection($event)" (onSave)="save()" (onFinish)="review()" finishLabel="Review">
            <form nestableForm #f2="ngForm">
              <app-company-names-section [nameReservationApplication]="nameReservationForm.application"></app-company-names-section>
            </form>
          </app-section>
        </accordion-group>
      </accordion>
    </div>
  </form>
</div>

import {Component, Inject, OnDestroy, OnInit, Renderer2, ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
import {Subscription} from 'rxjs';

import {ApplicationStatus} from '../../../../../core/application/model/application-status.model';
import {Roles} from '../../../../../core/application/registration/model/roles.model';
import {RootFormValidAccessor} from '../../../../../core/application/registration/ui/model/root-form-valid-accessor';
import {ErrorDetails} from '../../../../../core/error/model/error-details';
import {ErrorHandler} from '../../../../../core/error/ui/support/error-handler';
import {Attachment} from '../../../../../core/general/model/attachment.model';
import {FormValidationUtils} from '../../../../../core/support/ui/util/form-validation-utils';
import {NameReservationWrapper} from '../../../../../core/application/name-reservation/model/name-reservation-wrapper.model';
import {NameReservationService} from '../../../../../core/application/name-reservation/service/name-reservation.service';
import {NameReservationForm} from '../../../../../core/application/name-reservation/model/name-reservation-form.model';
import {NameReservationSectionTypes} from '../model/section-types.model';
import {ApplicationDocumentType} from '../../model/application-document-type';
import {NameReservationFlowSteps} from '../application-flow/model/name-reservation-flow-steps';
import {NameReservationApplicationType} from '../../../../../core/application/name-reservation/model/name-reservation-application-type.model';

@Component({
  selector: 'app-application',
  templateUrl: './application.component.html',
  providers: [
    {provide: RootFormValidAccessor, useExisting: ApplicationComponent}
  ]
})
export class ApplicationComponent implements OnInit, OnDestroy, RootFormValidAccessor {

  @ViewChild('applicationSteps') applicationSteps: any;
  @ViewChild('completeForm') completeForm: NgForm;

  paramsSubscription: Subscription;

  nameReservationWrapper: NameReservationWrapper;

  NameReservationSectionTypes = NameReservationSectionTypes;

  isEditable = false;

  numberOfSections = 0;

  modalRef: BsModalRef;

  private sectionNumbers: Map<NameReservationSectionTypes | Roles, number> = new Map();

  private step: string;

  constructor(@Inject(NameReservationService) private nameReservationService: NameReservationService,
              @Inject(ErrorHandler) private errorHandler: ErrorHandler,
              private route: ActivatedRoute,
              private router: Router,
              private modalService: BsModalService,
              private renderer: Renderer2) {
  }

  ngOnInit() {
    this.paramsSubscription = this.route.params.subscribe(params => {
      const currentStep = params['step'];
      if (this.step == null || this.step === currentStep) {
        this.nameReservationService.loadApplication(+params['id']).subscribe(nameReservationWrapper => {
            this.nameReservationWrapper = nameReservationWrapper;
            this.isEditable = this.nameReservationWrapper.status === ApplicationStatus.IN_PROGRESS;
          },
          error => {
            this.errorHandler.handleError(error, {canContinue: false});
          });
      }
    });
  }

  ngOnDestroy() {
    this.paramsSubscription.unsubscribe();
  }

  get nameReservationForm(): NameReservationForm {
    return this.nameReservationWrapper != null && this.nameReservationWrapper.form != null ? this.nameReservationWrapper.form : null;
  }

  sectionNumberForSectionType(sectionType: NameReservationSectionTypes) {
    if (this.isSectionVisible(sectionType)) {
      return this.sectionNumber(sectionType);
    }

    return null;
  }

  private sectionNumber(key: NameReservationSectionTypes | Roles): number {
    let sectionNumber = this.sectionNumbers.get(key);
    if (sectionNumber != null) {
      return sectionNumber;
    }

    sectionNumber = ++this.numberOfSections;

    this.sectionNumbers.set(key, sectionNumber);

    return sectionNumber;
  }

  private isSectionVisible(sectionType: NameReservationSectionTypes): boolean {
    switch (sectionType) {
      case NameReservationSectionTypes.APPLICANT_CONTACT_DETAILS:
      case NameReservationSectionTypes.COMPANY_NAMES:
        return true;
      default:
        return false;
    }
  }

  get rootFormValid(): boolean {
    return this.completeForm.valid && !this.completeForm.dirty;
  }

  get rootFormDirty(): boolean {
    return this.completeForm.dirty;
  }

  public selectSection(section: number) {
    this.applicationSteps.groups[section - 1].isOpen = true;
  }

  public save() {
    this.nameReservationService.addOrModifyApplication(this.nameReservationWrapper).subscribe(
      (nameReservationWrapper: NameReservationWrapper) => {
        this.completeForm.form.markAsPristine();
        this.nameReservationWrapper = nameReservationWrapper;
      },
      (error: ErrorDetails) => {
        this.errorHandler.handleError(error);
      }
    );
  }

  isDownloadEnabled(attachment: Attachment): boolean {
    return attachment.enableDownloadLink && this.applicationId != null && attachment.fileName !== null && attachment.fileName !== undefined && attachment.fileName.length > 0;
  }

  private get applicationId(): number {
    return this.nameReservationWrapper != null ? this.nameReservationWrapper.id : null;
  }

  accordionSetBodyClass(event: boolean, form: NgForm) {
    if (event) {
      this.renderer.addClass(document.body, 'pw-accordion-full-screen-open');
      if (this.hasInput(form)) {
        FormValidationUtils.validateAllFormFields(form.form);
      }

    } else {
      this.renderer.removeClass(document.body, 'pw-accordion-full-screen-open');
    }
  }

  hasInput(form: NgForm): boolean {
    return FormValidationUtils.hasInput(form);
  }

  public review() {

    // Save application before going on finish page
    this.nameReservationService.addOrModifyApplication(this.nameReservationWrapper).subscribe(
      (nameReservationWrapper: NameReservationWrapper) => {
        this.completeForm.form.markAsPristine();
        this.nameReservationWrapper = nameReservationWrapper;

        this.reviewApplication();
      },
      (error: ErrorDetails) => {
        this.errorHandler.handleError(error);
      }
    );
  }

  private reviewApplication() {
    this.nameReservationService.validateApplication(this.nameReservationWrapper).subscribe(
      (resp: Map<String, Set<String>>) => {
        if (Object.keys(resp).length > 0) {
          const errors: string[] = [];
          for (const k of Object.keys(resp)) {
            for (const v of resp[k]) {
              errors.push(k + ' => ' + v);
            }
          }
          this.errorHandler.handleError(errors);
        } else {
          this.router.navigate(['company', 'applications', this.applicationId, NameReservationFlowSteps.REVIEW, ApplicationDocumentType.NAME_RESERVATION]);
        }
      },
      (error: ErrorDetails) => {
        this.errorHandler.handleError(error);
      }
    );
  }
}