import { Component, OnInit, ElementRef, Input, EventEmitter } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { LocationCodeService } from '../../../services/location.code.service';
import { UomService } from '../../../services/uom.service';
import { BsModalRef } from 'ngx-bootstrap';
import { NGXLogger } from 'ngx-logger';
import { ItemVariantService } from '../../../services/item.variant.service';
@Component({
  selector: 'app-variant-info',
  templateUrl: './variant-info.component.html',
  styleUrls: ['./variant-info.component.css']
})

export class VariantInfoComponent implements OnInit {

    @Input() itemVariant: any;
    @Input() itemVariantFor: any;
    @Input() allVariantsOfItem: any;

    public event: EventEmitter<any> = new EventEmitter();

    itemVariantsForm: FormGroup;
    uoms: any[];

    itemVariantForTeam: FormControl;
    variantName: FormControl;
    variantUnit: FormControl;
    variantAlreadyExists: boolean;
    errorMessage: string;

    constructor(
        public bsModalRef: BsModalRef,
        private toastr: ToastrService,
        private locationCodeService: LocationCodeService,
        private uomService: UomService,
        private logger: NGXLogger,
        private el: ElementRef,
        private itemVariantService: ItemVariantService
    ) { }

    checkIfExists(){
        let variant =  this.itemVariantsForm.get('variantName').value;
        let unit = this.itemVariantsForm.get('variantUnit').value;
        let itemVariantBeingModified = this.itemVariant;
        let sameVariantAtLocation = this.allVariantsOfItem.find((variantInfo) => variantInfo.variant_id != itemVariantBeingModified.variant_id && variantInfo.variant === variant && variantInfo.variant_unit === unit && variantInfo.location_code_id === itemVariantBeingModified.location_code_id) 
        if(sameVariantAtLocation) {
            this.variantAlreadyExists=true;
            this.errorMessage = variant + ' ' + this.uoms.find((uom) => uom.uom_id === unit).uom_code + ' variant is already exists for this location.';
        } else {
            this.variantAlreadyExists = false;
        }
    }

    private setDefaultVariantValues() {
        this.itemVariantsForm.patchValue({
            variantName: this.itemVariant.variant,
            variantUnit: this.itemVariant.variant_unit
        });
    }

    private createVariantControls() {
        this.variantName = new FormControl();
        this.variantUnit = new FormControl();
    }

    setVariantValidations() {
    
        this.itemVariantsForm.controls.variantName.setValidators([Validators.required, Validators.pattern(/^[0-9]\d*(\.\d+)?$/)]);
        this.itemVariantsForm.controls.variantName.updateValueAndValidity();
    
        this.itemVariantsForm.controls.variantUnit.setValidators([Validators.required]);
        this.itemVariantsForm.controls.variantUnit.updateValueAndValidity();    
    }

    private triggerVariantValidations() {
        this.itemVariantsForm.controls.variantName.markAsTouched();
        this.itemVariantsForm.controls.variantUnit.markAsTouched();
    }

    /*
    @usage: Create all the fields mapping
    */
    createGroup() {
        this.itemVariantsForm = new FormGroup({
            variantName: this.variantName,
            variantUnit: this.variantUnit
        });
    }

    ngOnInit(){
        this.itemVariantForTeam = new FormControl();
        this.itemVariantForTeam.setValue(this.itemVariantFor);
        this.createVariantControls();
        this.createGroup();
        // Binding UOM
        this.uomService.getAllUoms().subscribe(
            uoms => {
                // tslint:disable-next-line: no-string-literal
                this.uoms = uoms['data'] as any[];
            }
        );
        this.setDefaultVariantValues();
        this.setVariantValidations();
    }

    private focusOnError() {
        try {
          const firstInvalidControl: HTMLElement = this.el.nativeElement.querySelector(
            'form .ng-invalid,form .error-control'
          );
          firstInvalidControl.focus();
        } catch { }
    }

    onSubmit(){
        if (this.itemVariantsForm.valid && !this.variantAlreadyExists) {
            const itemVariantDetails: any = {}
            itemVariantDetails.variant = this.variantName.value.toString().trim();
            itemVariantDetails.variant_unit = this.variantUnit.value.toString().trim();
            itemVariantDetails.variant_id = this.itemVariant.variant_id;
            itemVariantDetails.customer = this.itemVariant.customer;
            itemVariantDetails.key_item = this.itemVariant.key_item;
            itemVariantDetails.promo_item = this.itemVariant.promo_item;

            this.itemVariantService.updateItemVariantInfo(itemVariantDetails).subscribe(
                response => {
                  // tslint:disable-next-line: no-string-literal
                  const data: any = response as any[];
                  if (data.status === 'success') {
                    this.toastr.success('Item Variant information saved successfully.');
                    this.event.emit(true);
                  } else {
                    this.logger.error('Item Variant information can not be updated.');
                    this.toastr.error('Item Variant information can not be updated.');
                    this.event.emit(false);
                  }
                },
                error => {
                  this.logger.error('Item Variant information can not be updated.');
                  this.toastr.error('Item Variant information can not be updated.');
                  this.event.emit(false);
                }
            );
            this.bsModalRef.hide();
        }else{
            this.triggerVariantValidations();
            this.focusOnError();
        }
    }
}