import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@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 = {
        phone: '',
        password: ''
    }
    show_password = false;
    has_upper = false;
    has_special = false;

    constructor(
        private router: Router
    ) { }

    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);
    }

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

    enterMalls() {
        this.router.navigate(['/malls']);
        document.querySelector('.menu-icon-holder').classList.remove('hide');
    }

}
