import { Component, OnInit, ViewChild } from '@angular/core';
import { PortalPreviewComponent } from './portal-preview.component';
import { firstValueFrom } from 'rxjs';
import { PortalService } from './portal.service';

@Component({
  selector: 'app-portal',
  template: `
  <nz-page-header [nzGhost]="false">
    <nz-page-header-title i18n>Portal管理</nz-page-header-title>
    <nz-page-header-subtitle>
      <ng-container *ngIf="epgOptions && epgOptions.length > 0">
        <nz-select [(ngModel)]="epgId">
          <nz-option *ngFor="let item of epgOptions; let i=index" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
        </nz-select>
      </ng-container>
    </nz-page-header-subtitle>
    <nz-page-header-extra>
    </nz-page-header-extra>
    <nz-page-header-content>
    </nz-page-header-content>
  </nz-page-header>

  <nz-layout>
    <nz-sider style="max-width: 280px; width: 280px; flex: 0 0 280px;">
      <app-portal-preview *ngIf="epgId" [productId]="epgId" (onFocus)="onFocus($event)" #previewComp></app-portal-preview>
    </nz-sider>
    <nz-layout>
      <nz-content>
        <app-portal-banner *ngIf="epgId && mode == 'banner'" [productId]="epgId" (onUpdate)="onUpdate()"></app-portal-banner>
        <app-portal-header *ngIf="epgId && mode == 'header'" [productId]="epgId" (onUpdate)="onUpdate()"></app-portal-header>
      </nz-content>
    </nz-layout>
  </nz-layout>
  `,
  styles: [`
  
  nz-page-header {
    padding: 0px 24px
  }

  nz-header,
  nz-footer {
    background-color: white;
  }

  nz-footer {
    line-height: 1.5;
  }

  nz-sider {
    background-color: white;
  }

  nz-content {
    background-color: white;
  }

  `
  ]
})
export class PortalComponent implements OnInit {
  @ViewChild('previewComp') previewComp: PortalPreviewComponent;
  mode: string = 'none';

  epgOptions: any[] = [];
  _epgId: string;
  get epgId() {
    return this._epgId;
  }
  set epgId(value) {
    this._epgId = value;
  }

  constructor(
    private portalService: PortalService,
  ) {
    firstValueFrom(this.portalService.epgOption())
    .then((resp: any) => {
      this.epgOptions = resp;
      this.epgId = this.epgOptions[0].value;
    }) 
  }

  ngOnInit(): void {
  }

  onUpdate() {
    // todo...  refresh portal preview
    this.previewComp.loadData();
  }

  onFocus(mode: string) {
    this.mode = mode;
  }
}
