import { FlatfileAdapterModule } from '@flatfile/angular';

// Add to your Modules imports: []
imports: [
  FlatfileAdapterModule
]

import {
  // This interface is optional, but helpful to show you all the available required & optional inputs/outputs available to you
  FlatfileMethods,
  // The "Params" interfaces are useful to strongly type your output methods
  CompleteParams, 
  ErrorParams,
} from "@flatfile/angular";

@Component({
  template: `
    <flatfile-button
      [token]="token"
      (onComplete)="onComplete($event)"
      (onError)="onError($event)"
      class="flatfile-button"
    >
      Text you want to show for the button
    </flatfile-button>
  `,
}) export class MyDemoComponent implements FlatfileMethods {
  /**
   * @NOTE - Call your backend & retrieve your Token, and pass down the license key
   * 👇👇👇
   */
  token = 'YOUR_TOKEN_HERE';
  results;

  onComplete(event: CompleteParams) {
    console.log(`onComplete`);
    console.log(event);

    // Your data!
    this.results = event.data;
  }
  onError(event: ErrorParams) {
    console.log(`onError`);
    console.log(event);
  }
  
}

import {
  // This interface is optional, but helpful to show you all the available required & optional inputs/outputs available to you
  FlatfileMethods,
  // The "Params" interfaces are useful to strongly type your output methods
  InitParams,
  LaunchParams,
  CompleteParams,
  ErrorParams,
  UploadParams,
} from "@flatfile/angular";

@Component({
  template: `
    <flatfile-button
      [token]="token"
      [mountUrl]="mountUrl"
      [apiUrl]="apiUrl"
      (onInit)="onInit($event)"
      (onLaunch)="onLaunch($event)"
      (onComplete)="onComplete($event)"
      (onUpload)="onUpload($event)"
      (onError)="onError($event)"
      (onClose)="onClose()"
      class="flatfile-button"
    >
      Text you want to show for the button
    </flatfile-button>
  `,
  /**
   * @note IMPORTANT if you want to style the child component
   * from this "parent" component
   */
  encapsulation: ViewEncapsulation.None,
  /**
   * @note We gave our <flatfile-button class="flatfile-button"> a class,
   * and if we access the "button" inside of that, we can style it however we want!
   */
  styles: [`
    .flatfile-button button {
      border: 0;
      border-radius: 3px;
      padding: 1rem;
      background: #794cff;
      color: #fff;
    }
  `,
}) export class MyDemoComponent implements FlatfileMethods {
  
  /**
   * @NOTE - Call your backend & retrieve your Token, and pass down the license key
   * 👇👇👇
   */
  token = 'YOUR_TOKEN_HERE';

  /** optional **/
  mountUrl = '';
  /** optional **/
  apiUrl = '';

  results;

  /*
   * @Output() methods, make sure they are passed down to <flatfile-button>
   */
  onInit(event: InitParams) {
    console.log(`onInit`);
    console.log(event);
  }
  onUpload(event: UploadParams) {
    console.log(`onUpload`);
    console.log(event);
  }
  onLaunch(event: LaunchParams) {
    console.log(`onLaunch`);
    console.log(event);
  }
  onClose() {
    console.log(`onClose`);
  }
  onComplete(event: CompleteParams) {
    console.log(`onComplete`);
    console.log(event);

    this.results = event.data;
  }
  onError(event: ErrorParams) {
    console.log(`onError`);
    console.log(event);
  }
  
}