import { Component } from '@angular/core';
import { Validators } from '@angular/forms';
import {
  FormStructure,
  Input,
  InputPassword,
  DatePicker,
  Dropdown,
  Checkbox,
  Button,
  OptionChild,
  ActionEvent
} from 'mat-dynamic-form';

interface UserData {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
  birthDate: string;
  country: string;
  terms: boolean;
}

@Component({
  selector: 'app-user-registration',
  templateUrl: './user-registration.component.html',
  styleUrls: ['./user-registration.component.scss']
})
export class UserRegistrationComponent {
  formStructure: FormStructure;
  
  constructor() {
    this.formStructure = new FormStructure();
    this.formStructure.title = 'User Registration';
    this.formStructure.appearance = 'outline';
    this.formStructure.nodeGrid = 2;
    
    this.formStructure.nodes = [
      new Input('name', 'Full Name').apply({
        icon: 'person',
        maxCharCount: 100,
        validator: Validators.required
      }),
      
      new Input('email', 'Email Address').apply({
        icon: 'email',
        validator: [Validators.required, Validators.email],
        errorMessage: 'Please enter a valid email address'
      }),
      
      new InputPassword('password', 'Password').apply({
        validator: [Validators.required, Validators.minLength(8)],
        hint: 'Minimum 8 characters'
      }),
      
      new InputPassword('confirmPassword', 'Confirm Password').apply({
        validator: Validators.required
      }),
      
      new DatePicker('birthDate', 'Birth Date').apply({
        validator: Validators.required,
        singleLine: false
      }),
      
      new Dropdown('country', 'Country', [
        new OptionChild('United States', 'US'),
        new OptionChild('United Kingdom', 'UK'),
        new OptionChild('Canada', 'CA'),
        new OptionChild('Australia', 'AU')
      ]).apply({
        validator: Validators.required,
        singleLine: false
      }),
      
      new Checkbox(
        'terms',
        'I agree to the terms and conditions'
      ).apply({
        singleLine: true,
        validator: Validators.requiredTrue
      })
    ];
    
    this.formStructure.validateActions = [
      new Button('reset', 'Reset', {
        style: 'warn',
        onEvent: (param) => {
          param.structure.reset();
          param.structure.remapValues();
        }
      }).apply({
        icon: 'refresh'
      }),
      
      new Button('submit', 'Register', {
        style: 'primary',
        onEvent: (param) => this.onSubmit(param.structure)
      }).apply({
        validateForm: true,
        icon: 'check'
      })
    ];
  }
  
  onSubmit(structure: FormStructure) {
    const formData = structure.getValue<UserData>();
    
    // Validate password confirmation
    if (formData.password !== formData.confirmPassword) {
      alert('Passwords do not match!');
      return;
    }
    
    console.log('Registration data:', formData);
    alert('Registration successful!');
    
    // Here you would typically send data to your backend
    // this.userService.register(formData).subscribe(...);
  }
}