import { Component, OnInit, Input, EventEmitter, ElementRef } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { FormGroup, Validators, FormControl } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { ItemVariantService } from '../../../services/item.variant.service';
import { NGXLogger } from 'ngx-logger';

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

export class CostInfoComponent implements OnInit {
    @Input() itemVariant: any;
    public event: EventEmitter<any> = new EventEmitter();
    // Form group
    itemVariantCostForm: FormGroup;

    costPrice: FormControl;

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

    ngOnInit(): void {
        this.createCostControls();
        this.createGroup();

        this.setDefaultCostValues();
        this.setCostValidations();
    }

    private setDefaultCostValues() {
        // Cost fields default value
        this.itemVariantCostForm.patchValue({
          costPrice: this.itemVariant.cost_price
        });
    }

    private setCostValidations() {
        // Cost controls validation
        this.itemVariantCostForm.controls.costPrice.setValidators([Validators.required, Validators.pattern(/^[0-9]\d*(\.\d+)?$/)]);
        this.itemVariantCostForm.controls.costPrice.updateValueAndValidity();
    }

    private createCostControls() {
        this.costPrice = new FormControl();
    }

    private triggerCostValidations() {
        // Trigger cost fields validation
        this.itemVariantCostForm.controls.costPrice.markAsTouched();
    }

    /*
    @usage: Create all the fields mapping
    */
    createGroup() {
        this.itemVariantCostForm = new FormGroup({
            costPrice: this.costPrice
        });
    }

    updateCostPrice() {
        if (this.costPrice.valid && (this.costPrice.dirty === true || this.costPrice.touched === true)) {
            const num = Number(this.costPrice.value).toFixed(2);
            const numArray = num.split('.');
            this.itemVariantCostForm.patchValue({
                costPrice: numArray[0].slice(0, 9) + '.' + numArray[1].slice(0, 2)
            });
        }
    }

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

    /*
    @usage: to submit the form
    @purpose: to update item variant sales price into the db
    */
    onSubmit() {
        if(this.costPrice.value === null || this.costPrice.value === ''){
          this.itemVariantCostForm.controls.costPrice.markAsTouched();
        }
        if (this.itemVariantCostForm.valid) {
          const itemVariantCostDetails: any = {};
          itemVariantCostDetails.cost_price = this.costPrice.value.toString().trim();
          
          itemVariantCostDetails.variant_id = this.itemVariant.variant_id;
          itemVariantCostDetails.customer = this.itemVariant.customer;
          itemVariantCostDetails.key_item = this.itemVariant.key_item;
          itemVariantCostDetails.promo_item = this.itemVariant.promo_item;
  
          this.itemVariantService.updateCostInfo(itemVariantCostDetails).subscribe(
            response => {
              // tslint:disable-next-line: no-string-literal
              const data: any = response as any[];
              if (data.status === 'success') {
                this.toastr.success('Item Variant cost information saved successfully.');
                this.event.emit(true);
              } else {
                this.logger.error('Item Variant cost information can not be updated.');
                this.toastr.error('Item Variant cost information can not be updated.');
                this.event.emit(false);
              }
            },
            error => {
              this.logger.error('Item Variant cost information can not be updated.');
              this.toastr.error('Item Variant cost information can not be updated.');
              this.event.emit(false);
            }
          );
          this.bsModalRef.hide();
        }else{
          this.triggerCostValidations();
          this.focusOnError();
        }
    }
}