import { Component, OnInit, EventEmitter, Input } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { ItemService } from '../../../services/item.service';

@Component({
  selector: 'app-display-order',
  templateUrl: './display-order.component.html',
  styleUrls: ['./display-order.component.css']
})
export class DisplayOrderComponent implements OnInit {

  displayOrderForm: FormGroup;
  modalRef: BsModalRef;
  addedItems: FormArray;
  message: string;
  confirm: boolean;
  @Input() title: string;
  @Input() items: any[]
  @Input() isCategorySelectd: boolean
  @Input() categoryValue: string
  @Input() itemsLength: number = 0;
  maxItems: number = 0;
  @Input() itemName: string;
  @Input() displayOrder: number;
  public event: EventEmitter<any> = new EventEmitter();
  constructor(public bsModalRef: BsModalRef, private toastr: ToastrService,
    private fb: FormBuilder, private itemService: ItemService,) {

  }
  ngOnInit(): void {
    this.displayOrderForm = this.fb.group({
      addedItems: this.fb.array([])
    });

    this.addedItems = this.displayOrderForm.get('addedItems') as FormArray;
    this.maxItems = this.itemsLength;
    this.addedItems.push(this.defaultValue());
    for (var i = 0; i < this.items.length; i++) {
      this.addedItems.push(this.createAccountForm(this.items[i]));
    }

  }
  /*
    @purpose: to set the new Item name and display Order.
  */
  defaultValue(): FormGroup {
    return this.fb.group({
      item_name: [this.itemName],
      display_order: [this.displayOrder],
      item_id: []
    });


  }
  /*
    @purpose: to edit all the exisiting items (item name and display order).
  */
  private createAccountForm(item): FormGroup {
    return this.fb.group({
      item_name: [item.name],
      display_order: [item.displayOrder],
      item_id: [item.id]
    });

  }
  /*
    @usage: called on save button clicked
    @purpose: to send the updated display order and item name
  */
  onSubmit() {
    let flag = true;
    for (var i = 0; i < this.displayOrderForm.value.addedItems.length; i++) {
      if (this.displayOrderForm.value.addedItems[i].item_name === '' ||
        this.displayOrderForm.value.addedItems[i].item_name === null) {
        this.toastr.error('Item Name cannot be empty')

        flag = false;
      }
      if (this.displayOrderForm.value.addedItems[i].display_order === '' || this.displayOrderForm.value.addedItems[i].display_order === null) {
        this.displayOrderForm.value.addedItems[i].display_order = 0;
      }
    }
    if (flag) {
      this.event.emit(this.displayOrderForm.value.addedItems);
      this.bsModalRef.hide();
    }

  }
  /*
    @usage: called when cancel is clciked
    @purpose: to hide the modal
  */
  onCancel() {
    this.bsModalRef.hide();
  }

}