import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { LocationCodeService } from '../../../services/location.code.service';
import { EditLocationComponent } from './edit-location/edit-location.component';

@Component({
  selector: 'app-create-location',
  templateUrl: './create-location.component.html',
  styleUrls: ['./create-location.component.css']
})
export class CreateLocationComponent implements OnInit {
  locationForm: FormGroup;
  locations: any;
  editLocationRef: BsModalRef;
  selectedLocation: any;
  updateLocation: boolean = false;
  @Input() title;
  
  constructor(
    public bsModalRef: BsModalRef,
    private locationCodeService: LocationCodeService,
    private toastr: ToastrService,
    private fb: FormBuilder,
    private modalService:BsModalService){
  }

  ngOnInit(): void{
    this.locationForm = this.fb.group({
      location_name: ['', Validators.required],
      location_state: ['', Validators.required],
      location_state_code: ['', Validators.required],
      location_country: ['', Validators.required],
      location_country_code: ['', Validators.required],
      zip_code: [null, Validators.pattern("^[0-9]*$")],
      customer_portal: [false],
      is_default: [{ value: false, disabled: true }]
    });
    this.updateLocation = false;
    this.selectedLocation = null;
  }

  /*
  @usage: called on blur of location_name feild
  @purpose: to check the location_name is already exsits or not.
  */
  async checkDuplicateName() {
    if (this.locationForm.get('location_name').value) {
      let locationExist = false, locationName = this.locationForm.get('location_name').value;
      let locationExistsResult : any;
      // Duplicate location name check
      if(!this.updateLocation || (this.updateLocation && locationName.trim() !== this.selectedLocation.location_name )){
        locationExistsResult = await this.locationCodeService.isExistingLocationName(locationName);
        locationExist = locationExistsResult['data'] as boolean;
      }
      
      if (locationExist) {
        this.locationForm.get('location_name').setValue('');
      }
    }
  }

  removeValidators() {
    this.locationForm.get('location_name').clearValidators();
    this.locationForm.get('location_name').updateValueAndValidity();
    this.locationForm.get('location_state').clearValidators();
    this.locationForm.get('location_state').updateValueAndValidity();
    this.locationForm.get('location_state_code').clearValidators();
    this.locationForm.get('location_state_code').updateValueAndValidity();
    this.locationForm.get('location_country').clearValidators();
    this.locationForm.get('location_country').updateValueAndValidity();
    this.locationForm.get('location_country_code').clearValidators();
    this.locationForm.get('location_country_code').updateValueAndValidity();
  }

  setValidators() {
    this.locationForm.get('location_name').setValidators(Validators.required);
    this.locationForm.get('location_name').updateValueAndValidity();
    this.locationForm.get('location_state').setValidators(Validators.required);
    this.locationForm.get('location_state').updateValueAndValidity();
    this.locationForm.get('location_state_code').setValidators(Validators.required);
    this.locationForm.get('location_state_code').updateValueAndValidity();
    this.locationForm.get('location_country').setValidators(Validators.required);
    this.locationForm.get('location_country').updateValueAndValidity();
    this.locationForm.get('location_country_code').setValidators(Validators.required);
    this.locationForm.get('location_country_code').updateValueAndValidity();
  }

  editLocation(){
    this.editLocationRef = this.modalService.show(EditLocationComponent);
    this.editLocationRef.content.event.subscribe(modelResult => {
      this.selectedLocation = modelResult;
      if(this.selectedLocation){
        this.updateLocation = true;
        this.locationForm.patchValue({
          location_name: this.selectedLocation.location_name,
          location_state: this.selectedLocation.location_state,
          location_state_code: this.selectedLocation.location_state_code,
          location_country: this.selectedLocation.location_country,
          location_country_code: this.selectedLocation.location_country_code,
          zip_code: this.selectedLocation.zip_code,
          customer_portal: this.selectedLocation.customer_portal,
          is_default: this.selectedLocation.is_default
        });
        if(this.selectedLocation.is_default){
          this.locationForm.controls['is_default'].disable();
          this.locationForm.controls['customer_portal'].disable();
        }
        else{
          this.locationForm.controls['customer_portal'].enable();
          if(this.selectedLocation.customer_portal)
            this.locationForm.controls['is_default'].enable();
          else
            this.locationForm.controls['is_default'].disable();
        }
      }
    });
  }

  enableIsDefault(event){
    if(event.currentTarget.checked){
      this.locationForm.controls['is_default'].enable();
    }else{
      this.locationForm.get('is_default').setValue(false);
      this.locationForm.controls['is_default'].disable();
    }
  }

  async onSubmit(){
    if (this.locationForm.get('location_name').value === '' || this.locationForm.get('location_state').value === ''
    || this.locationForm.get('location_state_code').value === '' || this.locationForm.get('location_country').value === '' || this.locationForm.get('location_country_code').value === '') {
      this.locationForm.controls['location_name'].markAllAsTouched();
      this.locationForm.controls['location_state'].markAllAsTouched();
      this.locationForm.controls['location_state_code'].markAllAsTouched();
      this.locationForm.controls['location_country'].markAllAsTouched();
      this.locationForm.controls['location_country_code'].markAllAsTouched();
    }
    if (this.locationForm.valid){
      this.locationForm.value.is_default = this.locationForm.get('is_default').value? true : false;
      if (this.locationForm.get('zip_code').value === '')
        this.locationForm.value.zip_code = null;
      if(this.updateLocation){
        this.locationForm.value.location_id = this.selectedLocation.location_id;
        this.locationCodeService.updateLocation(this.locationForm.value).subscribe((updatedResult: { status: string, message: string, data }) => {
          if (updatedResult.status === "success") {
              this.toastr.success("Location details updated successfully!");
          }
        }, (error) => {
          this.toastr.error("Location details update failed. Please try again!");
        });
      }else{
        this.locationCodeService.addLocation(this.locationForm.value).subscribe((creationResult: { status: string, message: string, data }) => {
          if (creationResult.status === "success") {
              this.toastr.success("Location created successfully!");
          }
        }, (error) => {
          this.toastr.error("Location Creation failed. Please try again!");
        });
      }
      this.bsModalRef.hide();
    }
  }

  get location_name() { return this.locationForm.get('location_name') }
  get location_state() { return this.locationForm.get('location_state') }
  get location_state_code() { return this.locationForm.get('location_state_code') }
  get location_country() { return this.locationForm.get('location_country') }
  get location_country_code() { return this.locationForm.get('location_country_code') }
  get zip_code() { return this.locationForm.get('zip_code') }
  get customer_portal() { return this.locationForm.get('customer_portal') }
  get is_default() { return this.locationForm.get('is_default') }
}