import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { NgSelectModule } from '@ng-select/ng-select';

import { PasswordHideShowComponent } from '../../shared/components/password-hide-show/password-hide-show.component';
import { pageSizeOptions } from '../../utils/app.constants';
import { URIKey } from '../../utils/uri-enums';
import { HttpURIService } from '../../app.http.uri.service';
import { ButtonManagementService } from '../../services/button-management.service';

@Component({
  selector: 'app-third-party-registration',
  imports: [TranslateModule, CommonModule, FormsModule, ReactiveFormsModule, PasswordHideShowComponent, NgSelectModule ],
  templateUrl: './third-party-registration.component.html',
  styleUrl: './third-party-registration.component.scss'
})
export class ThirdPartyRegistrationComponent implements OnInit {
  thirdPartyRegForm! : FormGroup;
  searchText: string = '';
  passwordType: string = 'password';
  renewalDataExpanded = true;
  pageSizeOptions = pageSizeOptions;
  itemsPerPage: number = 5;
  buttonPermissions: any;
  @ViewChild(PasswordHideShowComponent) passwordHideShow?: PasswordHideShowComponent;

  constructor(
    private fb: FormBuilder, 
    private httpURIService: HttpURIService,
    private buttonManagementService: ButtonManagementService
  ){}

  togglePasswordType() {
    this.passwordType = this.passwordHideShow?.showPassword ? 'password' : 'text';
  }

  ngOnInit(): void{

    this.getButtonPermissions();

      this.thirdPartyRegForm = this.fb.group({
        thirdPartyId: ['', [Validators.required]],
        thirdPartyName: ['',[Validators.required]],
        email: ['',[Validators.required, Validators.email]],
        address: ['',[Validators.required]],
        phoneNumber: ['',[Validators.required, Validators.pattern('^[0-9]{10}$') ], ],
        newNumberOfAccounts: ['',[Validators.required]],
        password: ['',[Validators.required, Validators.minLength(6)]],
      });
  }

  get passwordError(){
    const control = this.thirdPartyRegForm.get('password');
    if (!control || !control.touched) return null;
    
    if (control.hasError('minlength')) return 'passwordTooShort';
    return null;
  }

  onSubmit(){
      
      if(this.thirdPartyRegForm.invalid){return}
      
    const payload = {
      thirdPartyId: this.thirdPartyRegForm.value.thirdPartyId,
      thirdPartyName: this.thirdPartyRegForm.value.thirdPartyName,
      email: this.thirdPartyRegForm.value.email,
      address: this.thirdPartyRegForm.value.address,
      phoneNumber: this.thirdPartyRegForm.value.phoneNumber,
      newNumberOfAccounts: this.thirdPartyRegForm.value.newNumberOfAccounts,
      password: this.thirdPartyRegForm.value.password
    };

  
      this.httpURIService.requestPOST(URIKey.THIRD_PARTY_REGISTER_URI, payload)
        .subscribe();
    }

  getButtonPermissions() {
    this.buttonPermissions = this.buttonManagementService.buttonPermissions["thirdPartyRegistration"];
  }
}