import { Component, OnInit } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
import { Router } from '@angular/router';
import { BackendService } from '../../../../services/backend/backend.service';
import { Parameters } from '../../../../models/parameters.model';
import { ToastrService } from 'ngx-toastr';

@Component({
	selector: 'app-parametres',
	templateUrl: './parametres.component.html',
	styleUrls: ['./parametres.component.css']
})
export class ParametresComponent implements OnInit {
	paramsFG:FormGroup;
	submitted:boolean=false;
	slideDisable:boolean=false;
	pinChecked:boolean=false;
	pinNumber:string="0000";
	isProcessing:boolean = true;
	isDisabled:boolean = true;
	timeLeft:number = 0;
	buttonText:string = "Mise à jour";
	interval:any;

	constructor(private fb:FormBuilder,
				private bs:BackendService,
				private router:Router,
				private toast:ToastrService) { }

	ngOnInit(): void {
		this.paramsFG=this.fb.group({
			num_accepted:["", [
				Validators.required,
				Validators.pattern('^[0-9]{15}$'),
			]],
			num_tone:["", [
				Validators.required,
				Validators.pattern('^[1-5]{1}$'),
			]],
			dtmf_code:["", [
				Validators.required,
				Validators.pattern('^[0-9A-D#*]{1}$'),
			]],
			dtmf_duration:["", [
				Validators.required,
				Validators.pattern('^[1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-5][0-5]$'),
			]],
		});

		this.bs.retreiveParams().subscribe(
			(data:Parameters) => {
				this.paramsFG.get('num_accepted').setValue(data.num_autorized);
				this.paramsFG.get('num_tone').setValue(data.tone_duration);
				this.paramsFG.get('dtmf_code').setValue(data.dtmf_code);
				this.paramsFG.get('dtmf_duration').setValue(data.dtmf_duration);
				this.slideDisable = data.pin_actif;
				this.pinChecked = data.pin_actif;
				this.pinNumber = data.code_pin;
				this.isProcessing = false;
				this.isDisabled = false;
			}, err => {
				if(err.status == 401) {
					this.router.navigateByUrl("/login");
				} else {
					this.toast.error(err.error.description);
				}
			}
		);
	}

	onSlideChanged(event: any): void {
		console.log("checked ?", event.checked);
		this.pinChecked=event.checked;
	}

	onCodeChanged(code: string): void {
		// this called every time when user changed the code
	}

	onCodeCompleted(code: string): void {
		// this called only if user entered full code
		this.pinNumber = code;
	}

	setTimeoutDisabledButton(timeout:number): void {
		this.timeLeft = timeout;
		this.isDisabled = true;
		this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
		this.interval = setInterval(() => {
			if(this.timeLeft > 0) {
				this.timeLeft--;
				this.buttonText = "Mise à jour" + " ... (" + this.timeLeft + ")";
			} else {
				this.isDisabled = false;
				this.buttonText = "Mise à jour";
				clearInterval(this.interval);
			}
		},1000)
	}

	onUpdate(): void {
		if(this.paramsFG.invalid) {
			console.log("Form invalid !!");
			return;
		}

		let params:Parameters = {
					 pin_actif:false,
					 code_pin:'',
					 num_autorized:'',
					 tone_duration:0,
					 dtmf_code:'',
					 dtmf_duration:0};
		params.pin_actif = this.pinChecked;
		if (this.pinChecked == false) {
			params.code_pin = '0000';
		} else {
			params.code_pin = this.pinNumber;
		}
		params.num_autorized = this.paramsFG.get('num_accepted').value;
		params.tone_duration = this.paramsFG.get('num_tone').value;
		params.dtmf_code = this.paramsFG.get('dtmf_code').value;
		params.dtmf_duration = this.paramsFG.get('dtmf_duration').value;
		this.setTimeoutDisabledButton(5);
		this.bs.updateParams(params).subscribe(
			data => {
				this.toast.success("Mise à jour des paramètres réussie");
			}, err => {
				if(err.status == 401) {
					this.router.navigateByUrl("/login");
				} else {
					this.toast.error(err.error.description);
				}
			}
		);
	}
}