import { Component, Output, Input } from 'angular-ts-decorators';
import { LinearWorkflowComponent } from './linear-workflow.component';


/**
 * A component which displays a single section in a linear workflow.
 */
@Component({
  selector: 'linearWorkflowSection',
  templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html',
  transclude: true,
  require: {
    parent: '^^linearWorkflow'
  }
})
export class LinearWorkflowSectionComponent implements ng.IComponentController {

  @Input('@') public sectionId: string;
  @Input('@') public sectionTitle: string;
  @Input() public sectionValid: boolean = false;
  public sectionVisible: boolean = false;
  public isCurrentSection: boolean = false;
  public parent: LinearWorkflowComponent;

  public $onInit(): void {
    this.parent.addSection(this);
  }

  public $onChanges(changes: ng.IOnChangesObject): void {
    if (changes['sectionValid'] !== undefined && !changes['sectionValid'].currentValue) {
      this.parent.onSectionInvalid(this.sectionId);
    }
  }

  public onSubmitSection(): void {
    if (this.sectionValid) {
      this.parent.onNextSection();
    }
  }
}