import { Component, Renderer2 } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/shared/services/auth.service';
import { TokenService } from 'src/app/shared/services/token.service';
import { LoginModel } from 'src/app/shared/user-auth.model';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss'],
})
export class LoginPageComponent {
  public showPassword = false;
  disabled = '';
  active: any;

  constructor(
    private authService: AuthService,
    private router: Router,
    private formBuilder: FormBuilder,
    private renderer: Renderer2,
    public tokenService: TokenService,
  ) {
     const bodyElement = this.renderer.selectRootElement('body', true);
     this.renderer.setAttribute(bodyElement, 'class', 'cover1 justify-center');
  }
  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      username: ['spruko@admin.com', [Validators.required, Validators.email]],
      password: ['sprukoadmin', Validators.required],
    });
  }

  // firebase
  email = 'spruko@admin.com';
  password = 'sprukoadmin';
  errorMessage = ''; // validation _error handle
  _error: { name: string; message: string } = { name: '', message: '' }; // for firbase _error handle

  clearErrorMessage() {
    this.errorMessage = '';
    this._error = { name: '', message: '' };
  }

  // login() {
  //   // this.disabled = "btn-loading"
  //   this.clearErrorMessage();
  //   if (this.validateForm(this.email, this.password)) {
  //     this.authservice
  //       .loginWithEmail(this.email, this.password)
  //       .then(() => {
  //         this.router.navigate(['/dashboard/sales']);
  //         console.clear();
  //       })
  //       .catch((_error: any) => {
  //         this._error = _error;
  //         this.router.navigate(['/']);
  //       });
  //   }
  // }

  login() {
    this.disabled = "btn-loading"
    let body: LoginModel = new LoginModel();
    body.username = this.email;
    body.password = this.password;
    this.authService.login(this.loginForm.controls['username'].value, this.loginForm.controls['password'].value).subscribe(result => {
      this.tokenService.saveToken(result.access_token);
      // this.tokenService.saveRefreshToken(result.refreshToken);
      this.tokenService.saveUser(result);
      if (result.member.status == 1) {
        if (result.member.role == 99) {
          this.router.navigate(['/admin/member-manage'])
        } else {
          this.router.navigate(['/admin/member-manage'])
        }
      } else {
        this.error = 'ไม่สามารถใช้งานได้กรุณาติดต่อผู้ให้บริการ'
      }
      // this.routes.navigate(['/admin/member-manage'])
    }, (error) => {
      this.disabled = '';
      this.error = 'Username หรือ Password ไม่ถูกต้อง';
    })

  }

  validateForm(email: string, password: string) {
    if (email.length === 0) {
      this.errorMessage = 'please enter email id';
      return false;
    }

    if (password.length === 0) {
      this.errorMessage = 'please enter password';
      return false;
    }

    if (password.length < 6) {
      this.errorMessage = 'password should be at least 6 char';
      return false;
    }

    this.errorMessage = '';
    return true;
  }

  //angular
  public loginForm!: FormGroup;
  public error: any = '';

  get form() {
    return this.loginForm.controls;
  }

  Submit() {
    if (
      this.loginForm.controls['username'].value === 'spruko@admin.com' &&
      this.loginForm.controls['password'].value === 'sprukoadmin'
    ) {
      this.router.navigate(['/dashboard/sales']);
    } else {
      this.error = 'Please check email and passowrd';
    }
  }

  public togglePassword() {
    this.showPassword = !this.showPassword;
  }

  ngOnDestroy(): void {
    const bodyElement = this.renderer.selectRootElement('body', true);
    this.renderer.removeAttribute(bodyElement, 'class');
  }
}
