import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { ArtService } from '../page/art.service';
import { firstValueFrom } from 'rxjs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormUtils } from 'src/app/lib/utils/form-utils';

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

<nz-spin [nzDelay]="500" [nzSpinning]="isLoading">

  <nz-page-header>
    <nz-page-header-title>综合评分:</nz-page-header-title>
    <nz-page-header-content>
      <nz-rate [ngModel]="art.score" nzDisabled></nz-rate>
      <span class="ms-4 text-warning fw-bold display-6">{{art.score}}</span>
    </nz-page-header-content>
  </nz-page-header>


  <nz-divider *ngIf="art.auth.canViewScoreDetail"></nz-divider>

  <nz-page-header *ngIf="art.auth.canViewScoreDetail">
    <nz-page-header-title>评分详情:</nz-page-header-title>
    <nz-page-header-content>
      <div *ngIf="scoreList.length <= 0" class="d-flex justify-content-center" i18n>
        尚未有评分
      </div>

      <nz-table #basicTable *ngIf="scoreList.length > 0" nzSize="small" [nzFrontPagination]="false" [nzShowPagination]="false" [nzData]="scoreList"
        [nzTemplateMode]="true" class="table table-hover table-sm table-edit">
        <thead>
          <tr>
            <th i18n>评价人</th>
            <th i18n>线稿评分</th>
            <th i18n>上色效果评分</th>
            <th i18n>填色体验评分</th>
            <th i18n>评分时间</th>
          </tr>
        </thead>
        <tbody *ngIf="basicTable.data && basicTable.data.length > 0">
          <tr *ngFor="let data of basicTable.data; let i = index" class="editable-row">
            <td> {{data.user.username}}</td>
            <td> {{data.pageScore}}</td>
            <td> {{data.coloredScore}}</td>
            <td> {{data.playScore}}</td>
            <td> {{data.time | dateFormat }}</td>
          </tr>
        </tbody>
      </nz-table>
    </nz-page-header-content>
  </nz-page-header>



  <nz-divider></nz-divider>



  <nz-page-header>
    <nz-page-header-title>我的评价:</nz-page-header-title>
    <nz-page-header-content>

      <form nz-form [formGroup]="form" (ngSubmit)="submit()" >

      <nz-form-item>
        <nz-form-label nzFor="pageScore" i18n>线稿评分</nz-form-label>
        <nz-form-control>
          <nz-rate formControlName="pageScore" nzAllowHalf></nz-rate>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFor="coloredScore" i18n>上色效果评分</nz-form-label>
        <nz-form-control>
          <nz-rate formControlName="coloredScore" nzAllowHalf></nz-rate>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
      <nz-form-label nzFor="playScore" i18n>游戏体验评分</nz-form-label>
        <nz-form-control>
          <nz-rate formControlName="playScore" nzAllowHalf></nz-rate>
        </nz-form-control>
      </nz-form-item>

      <div class="text-end">
        <button nz-button nzType="primary" type="submit" [disabled]="!form.dirty" i18n>提交</button>
      </div>
      
      </form>

    </nz-page-header-content>

  </nz-page-header>

  </nz-spin>

  `,
  styles: [
  ]
})

export class ScoreDetailComponent implements OnInit {
  @Input() art: any;

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

  scoreList: any[] = []; // 评分详情

  myScore: any;   // 我对此作品的评价

  form: FormGroup;


  constructor(
    private fb: FormBuilder,
    private message: NzMessageService,
    private modal: NzModalService,
    private artService: ArtService,
  ) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      art: [this.art._id],
      pageScore: [null,],
      coloredScore: [null,],
      playScore: [null],
    });
    this.loadData();
  }

  isLoading: boolean = false;

  loadData() {
    this.isLoading = true;

    firstValueFrom(this.artService.myScoreTasks())
      .then((resp: any) => {
        console.log(resp);
      })
      .catch(err => this.message.warning(err.error?.message || err.message))
      .finally(() => this.isLoading = false);


    firstValueFrom(this.artService.getMyScoreFor(this.art._id))
      .then((resp: any) => {
        this.myScore = resp;
        if (this.myScore) {
          this.form.reset(this.myScore);
        }
      })
      .catch(err => this.message.warning(err.error?.message || err.message))
      .finally(() => this.isLoading = false);

    if (this.art.auth.canViewScoreDetail) {
      this.isLoading = true;
      firstValueFrom(this.artService.getScoreDetail(this.art._id))
        .then((resp: any) => {
          this.scoreList = resp as any[];
        })
        .catch(err => this.message.warning(err.error?.message || err.message))
        .finally(() => this.isLoading = false);
    }

  }


  submit() {
    console.log('submit', this.form.valid);
    if (this.form.invalid) {
      FormUtils.markAsDirty(this.form);
      return;
    }

    this.artService.postScore(this.form.value).subscribe({
      next: (resp: any) => {
        this.art.score = resp;
        this.loadData();
        this.onScoreSuccess.emit();
      },
      error: err => this.message.warning(err.error?.message || err.message),
    })


  }


}
