import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FilterItem, FilterType } from 'src/app/lib/pager/pager-filter.component';

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

  <cg-pager 
    [userRouter]="false"
    remoteUrl="/napi/coloring/web/collection/all"
    remoteHeaderUrl="/napi/coloring/web/collection/headers"
    [listTemplate]="listTemplate"
    [pageSizeOptions]="[30, 60, 90, 120, 150, 180, 480]"
    [topPagination]="true"
    [bottomPagination]="true"
    [showOrder]="false"
    [showSearch]="false"
    [debug]="false"
    [inputFilters]="inputFilters"
    [defaultOrder]="'asc'"
    [defaultOrderBy]="'order'"
  ></cg-pager>


  <ng-template #listTemplate  let-list="list" >
    <div nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4" id="list-1" >
      <collection-card *ngFor="let item of list?.data" [ngClass]="{'select': isSelect(item)}"
        nz-col  [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="4" [nzXXl]="3"	
        [data]="item" (itemClick)="onItemClick($event)">
      </collection-card>
    </div>
  </ng-template>
  
  `,
  styles: [
    `
    .select {
      background: #dcdcdc;
      border-style: dashed;
      border-width: 2px;
      border-color: green;
    }

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

    `
  ]
})

export class PortalContentSelectCollectionComponent implements OnInit {

  @Input() productId: string;

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

  constructor(
  ) {
  }

  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.inputFilters = {
      enabled: true,
      pid: this.productId,
    }
  }

}

