import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { ToastService } from '../services/toast.service';

@Component({
    selector: 'app-onboarding',
    templateUrl: './onboarding.page.html',
    styleUrls: ['./onboarding.page.scss'],
})
export class OnboardingPage implements OnInit {
    slideOpts = {};
    timer: number = 10;
    timer_interval: any;
    credentials = {
        mobile: '',
        name: '',
        email: '',
        password: '',
        role: [
            'user'
        ],
        username: ''
    }
    show_password = false;
    has_upper = false;
    has_special = false;
    otp: string = '';

    constructor(
        private router: Router,
        private authService: AuthService,
        public toastService: ToastService
    ) { }    

    ionViewDidEnter() {
        document.querySelector('.menu-icon-holder').classList.add('hide');
    }

    ngOnInit() {
        this.slideOpts = {
            initialSlide: 0,
            allowTouchMove: false
        }

        this.timer_interval = setInterval(() => {
            this.timer--;
            if (this.timer === 0) {
                clearInterval(this.timer_interval);
            }
        }, 1000);
    }

    jumpPointer(i) {
        // document.querySelectorAll('.page4 .input-holder input')[i].focus();
    }

    padBefore(str) {
        return str.toString().padStart(2, '0');
    }

    checkPassword() {
        let specials = /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g;
        if (this.credentials.password.search(/[A-Z]/) < 0) {
            this.has_upper = false;
        } else {
            this.has_upper = true;
        }

        if (this.credentials.password.match(specials)) {
            this.has_special = true;
        } else {
            this.has_special = false;
        }
    }

    nextPage() {
        document.querySelector('ion-slides').slideNext(400);
    }

    previousPage() {
        document.querySelector('ion-slides').slidePrev(400);
    }

    signinPage() {
        this.router.navigate(['/login']);
    }

    verifyEmail() {
        this.authService.requestMailOTP(this.credentials.email).then((data) => {
            console.log(data);
            this.nextPage();
            this.toastService.presentToast("Verified", "success");
        }, (err) => {
            console.log(err);
            this.nextPage();
            this.toastService.presentToast("Failed to send OTP to your email", "danger");
        });
    }


    registerUser() {
        this.credentials.username = this.credentials.email;
        this.authService.signupUser(this.credentials).then((data) => {
            console.log(data);
            this.nextPage();
        }, (err) => {
            console.log(err);
            this.toastService.presentToast("Failed to create user", "danger");
        });
    }

    autoLogin() {
        this.authService.authenticateUser({ 
            username: this.credentials.username,
            password: this.credentials.password,
            login_type: 'user'
        }).then((data: any) => {
            localStorage.userInfo = JSON.stringify(data);
            localStorage.access_Token = data.access_Token;
            this.router.navigate(['/malls']);
            document.querySelector('.menu-icon-holder').classList.remove('hide');
        }, (err) => {
            console.log(err);
            this.toastService.presentToast('Please check your credentials', 'danger');
        })
    }

}
