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-create-user-modal',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NzFormModule,
    NzInputModule,
    NzSelectModule,
    NzDatePickerModule,
    NzButtonModule,
  ],
  template: `
    <form nz-form [formGroup]="createForm">
      <nz-form-item>
        <nz-form-label nzRequired>UID</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="uid" placeholder="请输入用户UID" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>FCM Token</nz-form-label>
        <nz-form-control>
          <input
            nz-input
            formControlName="fmToken"
            placeholder="请输入 firebase FCM Token"
          />
        </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> -->
    </form>
  `,
  styles: [
    `
      nz-form-item {
        margin-bottom: 16px;
      }
    `,
  ],
})
export class UserCreateModalComponent {
  createForm: FormGroup;

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