import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {NavigationComponent} from '@vendasta/fec-nav';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {MdSnackBar} from '@angular/material';
import {PartnerService} from '../../services/partner.service';
import {SessionService} from '../../services/session.service';

@Component({
  template: `
      <div class="docs" [innerHTML]="readMe"></div>
        
      <h1>Example:</h1>
      <div>Must be from the test environment:</div>
      <div class="example-form" *ngIf="!submitted">
          <md-input-container>
              <input mdInput #sessionIdInput [placeholder]="'Session ID'" value="{{sessionId}}" (keyup)="sessionId = sessionIdInput.value" [required]="true"/>
          </md-input-container>
          <md-input-container>
              <input mdInput #accountGroupIdInput [placeholder]="'Account Group ID'" value="{{accountGroupId}}" (keyup)="accountGroupId = accountGroupIdInput.value" [required]="true"/>
          </md-input-container>
          <md-input-container>
              <input mdInput #partnerIdInput [placeholder]="'Partner ID'" value="{{partnerId}}" (keyup)="partnerId = partnerIdInput.value" [required]="true"/>
          </md-input-container>
          <md-slide-toggle #disabledInput [checked]="disabled" (change)="disabled = !disabled">Disabled</md-slide-toggle>
          <button md-raised-button color="primary" (click)="viewBusinessProfile()">View Business Profile</button>
      </div>
      <div *ngIf="accountGroupId && submitted">
          <business-profile [accountGroupId]="accountGroupId" [productNames]="{'RM': 'Rep Man'}" [editDisabled]="disabled" [maxCompetitors]="4" [maxShareOfVoiceKeywords]="2"></business-profile>
      </div>
  `,
  styles: [require('../../assets/doc.scss'),
  `
  .example-form {
      display: flex;
      flex-direction: column;
      width: 50%;
      margin: auto;
  }
  `]
})
export class BusinessProfileDocComponent implements OnInit {
  readMe: SafeHtml;
  sessionId: string = '';
  accountGroupId: string = 'AG-P6MRGN2WN6';
  partnerId: string = 'ABC';
  disabled: boolean = false;
  submitted: boolean = false;

  constructor(private nav: NavigationComponent, public sanitizer: DomSanitizer, private snackbar: MdSnackBar, private partnerService: PartnerService, private sessionService: SessionService) {
    nav.activeMenuId = 'business-profile-doc';

    this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
  }
  ngOnInit(): void {
    if (this.sessionId && this.accountGroupId && this.partnerId) {
      this.viewBusinessProfile();
    }
  }

  viewBusinessProfile(): void {
    if (!this.sessionId && !this.accountGroupId && !this.partnerId) {
      this.snackbar.open('Invalid submission', null, {duration: 3000});
      return;
    }
    this.sessionService.setSessionId(this.sessionId);
    this.partnerService.setPartnerId(this.partnerId);
    this.submitted = true;
  }
}