import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { FilterItem, FilterType } from 'src/app/lib/pager/pager-filter.component';
import { PortalService } from './portal.service';
import { NzI18nService } from 'ng-zorro-antd/i18n';

@Component({
  selector: 'select-column',
  template: `


  <div nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4" >
    <nz-card nz-col  [nzSm]="6" [nzMd]="4" [nzLg]="4" [nzXl]="3" [nzXXl]="3"	
      *ngFor="let item of columns" class="card-config" 
      [ngClass]="{'card-select': isSelect(item)}" 
      [nzHoverable]="true" [nzSize]="'small'" [nzBodyStyle]="{'padding': '0'}" 
      (click)="onItemClick(item)">
      <p class="title">{{i18n.getLocaleId() == 'en' ? item.en : item.zh}}</p>
      <p class="desc">{{item.id}}</p>
    </nz-card>
  </div>

  `,
  styles: [
    `

    .card-config {
      text-align:center;
      border-radius: 4px;
    }

    .card-select {
      background: dodgerblue;
      color: white;
    }

    .title {
      font-size: 24px;
      font-weight: 600;
      margin: 8px 0px 6px 0px;
    }

    .desc {
      font-size: 12px;
    }

    :host {
      padding-bottom:100px;
      display:block;
    }

    `
  ]
})

export class PortalContentSelectColumnComponent implements OnInit {

  @Input() productId: string;
  columns: any;

  @Output() itemClick = new EventEmitter<any>();

  constructor(
    private portalService: PortalService,
    public i18n: NzI18nService,
  ) {
  }

  
  loadData() {
    firstValueFrom(this.portalService.epgAll())
    .then((resp: any) => {
      let epg = resp.data.find(e => e.epgId == this.productId);
      if (epg) {
        this.columns = epg.columns;
      }
    })
  }

  selectItem: any;

  onItemClick(item: any) {
    if (!this.selectItem || this.selectItem.id != item.id) {
      this.selectItem = item;
    } else {
      this.selectItem = null;
    }
    this.itemClick.emit(this.selectItem);
  }

  isSelect(item) {
    return this.selectItem?.id == item.id;
  }

  ngAfterViewInit() { 
  }

  ngOnInit() { 
    this.loadData();
  }

}

