import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef,
  ChangeDetectorRef
} from '@angular/core';
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl,
  ValidatorFn
} from '@angular/forms';
import { Company } from '@ucap-webmessenger/api-external';

@Component({
  selector: 'ucap-account-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  @Input()
  companyList?: Company[];
  @Input()
  curCompanyCode?: string;
  @Input()
  loginBtnText?: string;
  @Input()
  loginBtnEnable: boolean;
  @Input()
  notiText?: string;

  @Input()
  companyCode: string;
  @Input()
  loginId: string;
  @Input()
  loginPw?: string;
  @Input()
  rememberMe: boolean;
  @Input()
  autoLogin: boolean;

  @Input()
  useRememberMe: boolean;
  @Input()
  useAutoLogin: boolean;

  @Output()
  login = new EventEmitter<{
    companyCode: string;
    loginId: string;
    loginPw: string;
    rememberMe: boolean;
    autoLogin: boolean;
    notValid: () => void;
  }>();
  @Output()
  notiClick = new EventEmitter();

  @ViewChild('loginPw', { static: true }) loginPwElementRef: ElementRef;

  loginForm: FormGroup;
  companyCodeFormControl = new FormControl('');
  loginIdFormControl = new FormControl('');
  loginPwFormControl = new FormControl('');

  constructor(
    private formBuilder: FormBuilder,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit() {
    const companyCodeValidators: ValidatorFn[] = [Validators.required];
    this.companyCodeFormControl.setValidators(companyCodeValidators);
    if (!!this.curCompanyCode) {
      this.companyCodeFormControl.setValue(this.curCompanyCode);
    }
    const loginIdValidators: ValidatorFn[] = [Validators.required];
    this.loginIdFormControl.setValidators(loginIdValidators);
    if (!!this.loginId) {
      this.loginIdFormControl.setValue(this.loginId);
    }
    const loginPwValidators: ValidatorFn[] = [Validators.required];
    this.loginPwFormControl.setValidators(loginPwValidators);
    if (!!this.loginPw) {
      this.loginPwFormControl.setValue(this.loginPw);
    }

    this.loginForm = this.formBuilder.group({
      companyCodeFormControl: this.companyCodeFormControl,
      loginIdFormControl: this.loginIdFormControl,
      loginPwFormControl: this.loginPwFormControl,
      rememberMe: [false],
      autoLogin: [false]
    });

    if (!!this.rememberMe && this.rememberMe) {
      this.loginForm.get('rememberMe').setValue(true);
    }

    if (!!this.autoLogin && this.autoLogin) {
      this.loginForm.get('autoLogin').setValue(true);
    }

    if (!this.loginBtnText || this.loginBtnText.trim().length === 0) {
      this.loginBtnText = 'LOGIN';
    }
    this.changeDetectorRef.detectChanges();
  }

  onClickLogin() {
    this.login.emit({
      companyCode: this.loginForm.get('companyCodeFormControl').value,
      loginId: this.loginForm.get('loginIdFormControl').value,
      loginPw: this.loginForm.get('loginPwFormControl').value,
      rememberMe: this.loginForm.get('rememberMe').value,
      autoLogin: this.loginForm.get('autoLogin').value,
      notValid: () => {
        this.loginPwElementRef.nativeElement.focus();
      }
    });
  }

  onClickNoti(): void {
    this.notiClick.emit();
  }
}