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

@Component({
  selector: 'header-item-edit',
  template: `
<form [formGroup]="form" autocomplete="off" (ngSubmit)="onSubmit()" novalidate class="form-horizontal ">

<nz-form-item>
  <nz-form-label nzFor="title" i18n>Title</nz-form-label>
  <nz-form-control i18n-nzErrorTip nzErrorTip="请选择多语翻译">
    <nz-select formControlName="title" style="width: 90%" i18n-placeholder placeholder="请选择多语翻译">
      <nz-option *ngFor="let item of translateOptions; let i=index" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
    </nz-select>
  </nz-form-control>
</nz-form-item>

<nz-form-item>
  <nz-form-label nzFor="link" i18n>Link</nz-form-label>
  <nz-form-control i18n-nzErrorTip nzErrorTip="请输入Link">
    <input nz-input formControlName="link" id="link" style="width: 90%"
      i18n-placeHolder placeHolder="请选择内容或手动输入link">
    <i class="ms-3 fal fa-info" nz-tooltip [nzTooltipTitle]="linkTemplate"></i>
    <ng-template #linkTemplate>
      <div>link格式形如：</div>
      <div>链接到每日一图: art://inapp?type=daily</div>
      <div>链接到单个作品: art://inapp?type=single&id=xxx</div>
      <div>链接到某个栏目: art://inapp?type=column&id=xxx</div>
      <div>链接到某个专辑: art://inapp?type=album&id=xxx</div>
      <div>链接到某个收集: art://inapp?type=collection&id=xxx</div>
      <div>链接到所有专辑: art://inapp?type=allalbum</div>
      <div>链接到所有收集: art://inapp?type=allcollection</div>
      <div>外部链接: art://outapp?url=https://xxxx</div>
    </ng-template>
  </nz-form-control>
</nz-form-item>

<div class="text-start">
  <button nz-button nzType="primary" type="submit" [disabled]="!form.dirty">
    <ng-container *ngIf="headerItem" i18n>修改</ng-container>
    <ng-container *ngIf="!headerItem" i18n>新增</ng-container>
  </button>
</div>

</form>
  `,
  styles: [
  ]
})
export class PortalHeaderItemEditComponent implements OnInit {

  @Input() productId: string;

  _headerItem: any;
  @Input() set headerItem(value) {
    this._headerItem = value;
    if (!value) { // add
      this.form.reset({link: null, title: null});
    } else { // modify
      this.form.reset({link: value.link, title: value.title._id});
    }
    this.form.markAsPristine();  // 回到初始状态
  }
  get headerItem() {
    return this._headerItem;
  }

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

  form: FormGroup;

  translateOptions: any[] = [];

  constructor(
    private portalService: PortalService,
    private fb: FormBuilder,
    private message: NzMessageService,
    private nzModalService: NzModalService,
  ) { 
    firstValueFrom(this.portalService.translateOptions()).then((resp: any[]) => {
      this.translateOptions = resp;
    }) 
    this.form = this.fb.group({
      link: [null, [Validators.required]],
      title: [null, [Validators.required]],
    })
  }

  ngOnInit(): void {
  }


  onSubmit() {
    if (this.form.invalid) {
      FormUtils.markAsDirty(this.form);
      return;
    }

    let oldHeaderItem = this.headerItem;
    let newHeaderItem = { 
      title: this.getTitleInfo(this.form.value.title), 
      link: this.form.value.link 
    };

    let data = { oldHeaderItem, newHeaderItem };
    this.form.markAsPristine(); 
    this.onUpdate.emit(data);

  }


  getTitleInfo(id) {
    let item = this.translateOptions.find(e => e.value == id);
    let label = item.label;
    label = label.substring(label.indexOf(':') + 1);
    let words = label.split('|');
    let data = { _id: id, en: words[0], zh: words[1] };
    return data;
  }

}
