import { Component } from '@angular/core';
import { WizardConfig, WizardService } from '@c8y/ngx-components';
import { ModalOptions } from 'ngx-bootstrap/modal';

@Component({
  selector: 'wizard-demo'
})
export class WizardDemoComponent {
  constructor(private c8yWizardService: WizardService) {}

  addApplication() {
    const wizardConfig: WizardConfig = {
      headerText: 'Add Application',
      headerIcon: 'c8y-icon-modules',
      bodyHeaderText: 'Select methods',
      bodyHeaderIcon: 'c8y-icon-modules'
    };

    const initialState = {
      id: 'wizardId',
      wizardConfig
    };

    const modalOptions: ModalOptions = { initialState };

    this.c8yWizardService.show(modalOptions);
  }
}

import { NgModule } from '@angular/core';
import { HOOK_WIZARD } from '@c8y/ngx-components';
import { ContainerComponent } from 'pathToYourContainerComponent';

@NgModule({
  declarations: [ContainerComponent],
  entryComponents: [ContainerComponent],
  providers: [
    {
      provide: HOOK_WIZARD,
      useValue: {
        // The id of a wizard to which the entry should be hooked.
        wizardId: 'wizardId',
        // The container component is responsible for handling subsequent steps in the wizard.
        component: ContainerComponent,
        // Menu entry name
        name: 'Upload application',
        // Menu entry icon
        c8yIcon: 'upload'
      },
      multi: true
    }
  ]
})
export class YourModule {}

import { Component } from '@angular/core';
import { WizardComponent } from '@c8y/ngx-components';

@Component({
  selector: 'container-component',
  template: `
    <c8y-wizard-header>
      New header content
    </div>
    </c8y-wizard-header>
    <c8y-wizard-body>
      New body content
    </c8y-wizard-body>
    <c8y-wizard-footer>
      <button
        (click)="back()"
      >
        Back
      </button>

      <button 
        (click)="cancel()"
      >
        Cancel
      </button>
    </c8y-wizard-footer>
  `
})
export class ContainerComponent {
  attributeToBePassed: string;

  constructor(private wizardComponent: WizardComponent) {}

  back() {
    const result: any = 'dataToBeEmittedOnReset';
    this.wizardComponent.reset(result);
  }

  cancel() {
    const result: any = 'dataToBeEmittedOnClose';
    this.wizardComponent.close(result);
  }
}

import { Component } from '@angular/core';
import { WizardEntry, WizardConfig, Wizard } from '@c8y/ngx-components';
import { CustomComponent } from './custom.component.ts';
import { takeUntil } from 'rxjs/operators';
import { ModalOptions } from 'ngx-bootstrap/modal';

@Component({
  selector: 'wizard-demo'
})
export class WizardDemoComponent {
  destroy$: Subject<boolean> = new Subject<boolean>();

  onButtonClick() {
    const wizardConfig: WizardConfig = {
      headerIcon: 'c8y-icon-modules',
      headerText: 'Wizard header',
      bodyHeaderText: 'Body section header'
    };

    const initialState: Wizard<ContainerComponent> = {
      id: 'wizardId',
      wizardConfig,
      componentState: {
        attributeToBePassed: 'Some sample text'
      }
    };
    const modalOptions: ModalOptions = { initialState };

    const modalRef = this.wizardService.show(modalOptions);

    modalRef.content.onSelect.pipe(takeUntil(this.destroy$)).subscribe(menuEntry => {
      // handle menu entry
    });

    modalRef.content.onClose.pipe(takeUntil(this.destroy$)).subscribe(result => {
      // handle result
    });

    modalRef.content.onReset.pipe(takeUntil(this.destroy$)).subscribe(result => {
      // handle result
    });
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}