import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { FilterItem, FilterType } from 'src/app/lib/pager/pager-filter.component';
import { SysService } from 'src/app/pages/sys/sys.service';
import { AlbumAddComponent } from './album-add.component';
import { firstValueFrom } from 'rxjs';
import { AlbumService } from './album.service';

@Component({
  selector: 'app-album',
  template: `

  <nz-page-header *ngIf="!embedMode" [nzGhost]="false">
    <nz-page-header-title i18n>{{data?.title || '所有专辑'}}</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>
      <button *can="['create', 'any', 'art-album']" nz-button nzType="primary" (click)="onCreate()">
        <i class="fal fa-cloud-upload mr-1"></i>
        <ng-container i18n>创建专辑</ng-container>
      </button>
    </nz-page-header-extra>
    <nz-page-header-content>
    </nz-page-header-content>
  </nz-page-header>


  <cg-pager 
    [remoteUrl]="remoteUrl"
    remoteHeaderUrl="/napi/coloring/web/album/headers"
    [listTemplate]="listTemplate"
    [pageSizeOptions]="[30, 60, 90, 120, 150, 180, 480]"
    [topPagination]="true"
    [bottomPagination]="true"
    [showOrder]="false"
    [showSearch]="false"
    [debug]="false"
    [refresh]="refreshTrigger"
    [filterConfig]="filterConfig"
    [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" 
      cdkDropList 
      id="list-1" 
      cdkDropListConnectedTo="list-2"
      [cdkDropListDisabled]="!embedMode" 
      [cdkDropListSortingDisabled]="true"
      [cdkDropListData]="list?.data"
       >
      <album-card *ngFor="let item of list?.data" 
        nz-col  [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="4" [nzXXl]="3"	
        [data]="item"  
        (itemClick)="onItemClick($event)"
        cdkDrag
         >
      </album-card>
    </div>
  </ng-template>
  
  `,
  styles: [
    `
    :host {
      padding-bottom:100px;
      display:block;
    }

    .cdk-drag-preview {
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                  0 8px 10px 1px rgba(0, 0, 0, 0.14),
                  0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .cdk-drag-placeholder {
      opacity: 0;
    }

    .cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }

    nz-select {
      width: 150px;
    }
    `
  ]
})

export class AlbumComponent implements OnInit {

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

  @Input() remoteUrl = '/napi/coloring/web/album/all';
  @Input() embedMode : boolean = false;
  @Input() refreshTrigger : any;

  @Input()
  filterConfig: FilterItem[] = [
    {
      data: 'enabled',
      title: $localize`状态`,
      filterType: FilterType.radio,
      options: [
        { label: $localize`启用`, value: true },
        { label: $localize`禁用`, value: false },
      ],
      span: 2,
    }

  ];


  inputFilters: any;

  constructor(
    private albumService: AlbumService,
    private router: Router,
    private nzModalService: NzModalService,
  ) {


    firstValueFrom(this.albumService.epgOption())
    .then((resp: any) => {
      this.epgOptions = resp;
      this.epgId = this.epgOptions[0].value;
    }) 
  }

  data: any;

  onItemClick(data: any) {
    this.router.navigate(['/coloring/album/detail', data._id]);
  }

  ngAfterViewInit() { 
  }

  ngOnInit() { 
  }

  onCreate() {
    const modalRef = this.nzModalService.create({
      nzTitle: $localize`新建专辑`,
      nzFooter: null,
      nzWidth: '50vw',
      nzContent: AlbumAddComponent,
      nzComponentParams: {
        pid: this.epgId,
      }
    });

    modalRef.getContentComponent().onSuccess.subscribe(e => {
      this.refreshTrigger++;
      modalRef.close();
    })
    
  }


}
