import { Component, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { DialogsModule } from '@progress/kendo-angular-dialog';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { CreateUserRequest } from '../../models/user.model';
import { LANGUAGE_OPTIONS, ROLE_OPTIONS } from '../../../../shared/i18n/option-lists';

@Component({
  selector: 'app-create-user-dialog',
  standalone: true,
  imports: [
    CommonModule, ReactiveFormsModule, DialogsModule,
    InputsModule, LabelModule, DropDownsModule, ButtonsModule
  ],
  templateUrl: './create-user-dialog.component.html',
})
export class CreateUserDialogComponent {
  @Output() saved     = new EventEmitter<CreateUserRequest>();
  @Output() cancelled = new EventEmitter<void>();

  form: FormGroup;
  readonly roleOptions = ROLE_OPTIONS;
  readonly langOptions = LANGUAGE_OPTIONS;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      email:              ['', [Validators.required, Validators.email]],
      roles:              [[], Validators.required],
      languagePreference: ['en'],
      memberId:           [null],
    });
  }

  onSubmit(): void {
    if (this.form.invalid) { this.form.markAllAsTouched(); return; }
    const val = this.form.value;
    this.saved.emit({
      email:              val.email,
      roles:              val.roles,
      languagePreference: val.languagePreference,
      memberId:           val.memberId,
    });
  }

  onCancel(): void { this.cancelled.emit(); }
}
