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

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

  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.c8yWizardModalService.show(modalOptions);
  }
}

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

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

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

    // Configure the initial state of the wizard.
    const initialState = {
      id: 'wizardId',
      wizardConfig
    };
    const modalOptions: ModalOptions = { initialState };

    // Configure modal options.
    const options = {
      class: 'modal-sm',
      ariaDescribedby: 'modal-body',
      ariaLabelledBy: 'modal-title',
      backdrop: 'static',
      ...modalOptions
    } as ModalOptions<WizardComponent>;

    this.bsModalService.show<WizardComponent>(WizardComponent, options);
  }
}

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

@NgModule({
  declarations: [ContainerComponent],
  providers: [
    hookWizard({
      // 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'
    })
  ]
})
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, WizardModalService } 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>();

  constructor(private c8yWizardModalService: WizardModalService) {}

  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.c8yWizardModalService.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();
  }
}