import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  FormsModule,
  ReactiveFormsModule,
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalRef } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-user-edit-modal',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NzFormModule,
    NzInputModule,
    NzSelectModule,
    NzDatePickerModule,
    NzButtonModule,
  ],
  template: `
    <form nz-form [formGroup]="editForm">
      <nz-form-item>
        <nz-form-label nzRequired>UID</nz-form-label>
        <nz-form-control>
          <input
            nz-input
            formControlName="uid"
            placeholder="用户UID"
            [disabled]="true"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>项目ID</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="project" placeholder="项目ID" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>国家代码</nz-form-label>
        <nz-form-control>
          <nz-select formControlName="cc" nzPlaceHolder="选择国家代码">
            <nz-option nzValue="US" nzLabel="美国"></nz-option>
            <nz-option nzValue="CN" nzLabel="中国"></nz-option>
            <!-- 其他国家的选项 -->
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>语言</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="lang" placeholder="语言代码" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>设备型号</nz-form-label>
        <nz-form-control>
          <input
            nz-input
            formControlName="deviceModel"
            placeholder="设备型号"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>应用版本</nz-form-label>
        <nz-form-control>
          <input
            nz-input
            formControlName="versionName"
            placeholder="应用版本"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>FCM Token</nz-form-label>
        <nz-form-control>
          <textarea
            nz-input
            formControlName="fmToken"
            placeholder="firebase message token"
            rows="2"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  `,
  styles: [
    `
      nz-form-item {
        margin-bottom: 16px;
      }
    `,
  ],
})
export class UserEditModalComponent {
  editForm: FormGroup;

  constructor(private fb: FormBuilder, private modalRef: NzModalRef) {
    this.editForm = this.fb.group({
      uid: ['', [Validators.required]],
      project: [''],
      cc: [''],
      lang: [''],
      deviceModel: [''],
      versionName: [''],
      fmToken: [''],
    });

    // 从模态框数据中初始化表单
    if (this.modalRef.getConfig().nzData?.user) {
      this.editForm.patchValue(this.modalRef.getConfig().nzData.user);
    }
  }
}
