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

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

<form [formGroup]="form" autocomplete="off" (ngSubmit)="onSubmit()" novalidate class="form-horizontal ">
  <nz-form-item>
    <nz-form-control i18n-nzErrorTip nzErrorTip="请输入栏目id">
      <nz-input-group nzPrefixIcon="user">
        <input nz-input formControlName="id" i18n-placeholder placeholder="栏目id">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
  <nz-form-control i18n-nzErrorTip nzErrorTip="请选择多语翻译">
    <nz-input-group nzPrefixIcon="global">
      <nz-select [(ngModel)]="translate" formControlName="translate" i18n-placeholder placeholder="请选择多语翻译">
        <nz-option *ngFor="let item of translateOptions; let i=index" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
      </nz-select>
    </nz-input-group>
    </nz-form-control>
  </nz-form-item>


  <!-- <nz-form-item>
    <nz-form-control i18n-nzErrorTip nzErrorTip="请输入栏目英文名">
      <nz-input-group nzPrefixIcon="user">
        <input nz-input formControlName="en" placeholder="英文名">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control i18n-nzErrorTip nzErrorTip="请输入栏目中文名">
      <nz-input-group nzPrefixIcon="user">
        <input nz-input formControlName="zh" placeholder="中文名">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item> -->

  <div class="d-flex flex-row-reverse">
    <button nz-button nzType="primary" nzBlock type="submit" [disabled]="isLoading" i18n>添加</button>
  </div>
</form>

  `,
  styles: [
  ]
})
export class ColumnAddComponent implements OnInit {

  @Input() epgId: string;

  @Output() onSuccess = new EventEmitter<any>();
  @Output() onError = new EventEmitter<any>();

  form: FormGroup;
  isLoading = false;

  translateOptions: any[] = [];

  translate: string; // 多语翻译ID

  constructor(
    private epgService: EpgService,
    private contentService: ContentService,
    private fb: FormBuilder,
    private message: NzMessageService,
  ) { 
    firstValueFrom(this.contentService.translateOptions()).then((resp: any[]) => {
      this.translateOptions = resp;
    }) 
  }

  ngOnInit(): void {
    this.form = this.fb.group({
      id: [null, [Validators.required]],
      visible: [false, [Validators.required]],
      translate: [null, [Validators.required]],
      // en: [null, [Validators.required]],
      // zh: [null, [Validators.required]],
    })
  }

  
  onSubmit() {
    if (this.form.invalid) {
      FormUtils.markAsDirty(this.form);
      return;
    }
    this.isLoading = true;
    Object.assign(this.form.value, { _id: this.epgId });
    firstValueFrom(this.epgService.columnAdd(this.form.value))
      .then(res => {
        this.onSuccess.emit(this.form.value);
        this.message.success($localize`添加成功`);
      })
      .catch(err => {
        this.message.error(err.error?.message || err.message);
        this.onError.emit(err);
      }).then(() => {
        this.isLoading = false;
      })
  }

}