import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { Item } from '../item.model';

import { LanguageService } from '../../language.service';
import { LanguageData } from '../../language.model';

@Component({
	selector: 'app-item-create',
	templateUrl: './item-create.component.html',
	styleUrls: ['./item-create.component.css']
})

export class ItemCreateComponent implements OnInit {

	form: UntypedFormGroup;
	id: string | undefined = '';
	numberRegEx = /\d*\.?\d{1,2}/;
    //
    // Language Support
    //
    vE = {
    	itemcreateAddItem : '',
    	itemcreateItemLbl : '',
    	itemcreateItemDescr : '',
    	itemcreateItemPrice : '',
    	itemcreateUseNums : '',
    	itemcreateCloseBtn : '',
    	itemcreateSaveBtn : ''
    }
    //
    // ------------------------------------------------------------
	constructor(
		private languageService : LanguageService,
		private fb: UntypedFormBuilder,
		private dialogRef: MatDialogRef<ItemCreateComponent>,
		@Inject(MAT_DIALOG_DATA) public data: Item
	){
		if (data._id === '') { 
			this.form = fb.group({
				id: [''],
				name: [null, Validators.required],
				description: [null, Validators.required],
				cost: new UntypedFormControl('', {
					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
					updateOn: "blur"
				})
			});
		} else {
			this.id = data._id;
			this.form = fb.group({
				id: [data._id],
				name: [data.name, Validators.required],
				description: [data.description, Validators.required],
				cost: new UntypedFormControl(data.cost, {
					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
					updateOn: "blur"
				})
			});
		}
	}

	ngOnInit () {
        this.chgUILanguage();
	}

	save() {
//		console.log(this.form.value);
		this.dialogRef.close(this.form.value);
	}

	close () {
		this.dialogRef.close();
	}

	chgUILanguage(){
        console.log('ITEMLREATE.chgUILanguage Called ');
 		this.languageService.getViewElements('itemcreate').subscribe(
				response => { 
					console.log('Received >> ', response );
					console.log('Language Code : ', response.language);
					console.log('Component Name : ',response.component);
					console.log('Language data : ',response.data);

			    	this.vE.itemcreateAddItem = response.data.itemcreate_add_item;
			    	this.vE.itemcreateItemLbl = response.data.itemcreate_item_lbl;
			    	this.vE.itemcreateItemDescr = response.data.itemcreate_item_descr;
			    	this.vE.itemcreateItemPrice = response.data.itemcreate_item_price;
			    	this.vE.itemcreateUseNums = response.data.itemcreate_use_nums;
			    	this.vE.itemcreateCloseBtn = response.data.itemcreate_close_btn;
			    	this.vE.itemcreateSaveBtn = response.data.itemcreate_save_btn;
			    },
				error  => { console.log('Error >> ',error); }
			);
	}
}