import { Component, OnInit, EventEmitter } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { ItemCategoryService } from '../../../services/item.category.service';
import { FileUploadService } from '../../../services/fileupload.service';
import { NGXLogger } from 'ngx-logger';
import { NewCategoryDisplayOrderPopupComponent } from './new-category-display-order-popup/new-category-display-order-popup.component';


@Component({
  selector: 'app-new-category-modal',
  templateUrl: './new-category-modal.component.html',
  styleUrls: ['./new-category-modal.component.css']
})
export class NewCategoryModalComponent implements OnInit {

  categoryForm: FormGroup;
  message: string;
  confirm: boolean;
  isCategoryExists: boolean;
  isValidDesktopImage = false;
  isValidDeviceImage = false;
  isValidAppImage = false;
  categoryDisplayModalRef: BsModalRef;
  desktopImageFileContent: string;
  deviceImageFileContent: string;
  appImageFileContent: string;
  allCategoryItems:any[];
  itemDetailstoBeUpdated: any = {};
  public event: EventEmitter<any> = new EventEmitter();
  constructor( public modalRef2: BsModalRef,private logger: NGXLogger,private modalService:BsModalService, private toastr: ToastrService, private fb: FormBuilder, private itemCategoryService: ItemCategoryService, private fileUploadService: FileUploadService
  ) {
    this.itemCategoryService.getAllItem_Categories().subscribe((result: { status: string, message: string, data }) => {
      this.allCategoryItems = result.data.map((term) => {
        return {
          name: term.product_category,
          displayOrder: term.display_order,
         
        }
      });
    });
    this.itemCategoryService.getAllItem_Categories().subscribe()
  }
  ngOnInit(): void {
    this.categoryForm = this.fb.group({
      product_category: ['', Validators.required],
      display_order: [, { validators: [Validators.required, Validators.pattern("^[0-9]*$")] }],
      desktopImage: [''],
      deviceImage: [''],
      appImage: [''],
      desktopImageFileContent: [''],
      deviceImageFileContent: [''],
      appImageFileContent: ['']
    });
  }

  // Validate and get desktop categry image content
   validateAndGetDesktopImageContent(event) {
    const file = event.target.files[0];
    if (file) {
      this.fileUploadService.isValidImageFile(file, (isValid) => {
        this.isValidDesktopImage = isValid;
        if (this.isValidDesktopImage) {
          this.fileUploadService.getImageBinaryString(file, (content) => {
            this.desktopImageFileContent = content;
          })
        }
      })
    }
    else
      this.isValidDesktopImage = false;
  }

  // Validate and get device categry image content
  validateAndGetDeviceImageContent(event) {
    const file = event.target.files[0];
    if (file) {
      this.fileUploadService.isValidImageFile(file, (isValid) => {
        this.isValidDeviceImage = isValid;
        if (this.isValidDeviceImage) {
          this.fileUploadService.getImageBinaryString(file, (content) => {
            this.deviceImageFileContent = content;
          })
        }
      })
    }
    else
      this.isValidDeviceImage = false;
  }

  // Validate and get app categry image content
  validateAndGetAppImageContent(event) {
    const file = event.target.files[0];
    if (file) {
      this.fileUploadService.isValidImageFile(file, (isValid) => {
        this.isValidAppImage = isValid;
        if (this.isValidAppImage) {
          this.fileUploadService.getImageBinaryString(file, (content) => {
            this.appImageFileContent = content;
          })
        }
      })
    }
    else
      this.isValidAppImage = false;
  }
   /*
  @usage: called when select display order link is clicked
  @purpose: to set the display order of all the items
  */
 selectDisplayOrder() {
  if (this.categoryForm.get('product_category').value) {

    if (this.itemDetailstoBeUpdated.length > 0) {
      this.allCategoryItems = this.itemDetailstoBeUpdated;
      for (var i = 0; i < this.itemDetailstoBeUpdated.length; i++) {
        this.allCategoryItems[i].displayOrder = this.itemDetailstoBeUpdated[i].display_order;
        this.allCategoryItems[i].name = this.itemDetailstoBeUpdated[i].product_category;

      }
    }
    this.categoryDisplayModalRef = this.modalService.show(NewCategoryDisplayOrderPopupComponent, {
      backdrop: 'static',
      keyboard: false,
      animated: true,
      ignoreBackdropClick: true,
      initialState: {
        title: 'Display Order',
        items: this.allCategoryItems,
        itemName: this.categoryForm.get('product_category').value,
        displayOrder: this.categoryForm.get('display_order').value,
        config: "{ backdrop: 'static' }",
      }
    });
    this.categoryDisplayModalRef.content.event.subscribe(modelResult => {
      this.itemDetailstoBeUpdated = modelResult;
      this.categoryForm.get('product_category').setValue(this.itemDetailstoBeUpdated[0].product_category);
      this.categoryForm.get('display_order').setValue(this.itemDetailstoBeUpdated[0].display_order);
      this.itemDetailstoBeUpdated.shift();

    });
  }
  else {
   this.toastr.warning('Please enter the category first');
  }


}
  //To check for unique name
  async checkForProductName() {
    let categoryName = this.categoryForm.get('product_category').value;
    const body = await this.itemCategoryService.isCategoryExists(categoryName);
    this.isCategoryExists = body['data'] as boolean;
    if (this.isCategoryExists) {
      this.categoryForm.get('product_category').setValue('');
    }
  }

  /*
    @usage: called when a form is submitted
  */
  async onSubmit() {
    if (this.categoryForm.get('display_order').value === '' ||
      this.categoryForm.get('product_category').value === '' ||
      this.categoryForm.get('desktopImageFileContent').value === '' ||
      this.categoryForm.get('deviceImageFileContent').value === '' ||
      this.categoryForm.get('appImageFileContent').value === '') {
      this.categoryForm.controls['product_category'].markAllAsTouched();
      this.categoryForm.controls['display_order'].markAllAsTouched();
      this.categoryForm.controls['desktopImage'].markAllAsTouched();
      this.categoryForm.controls['deviceImage'].markAllAsTouched();
      this.categoryForm.controls['appImage'].markAllAsTouched();
    }
    if(this.categoryForm.get('display_order').value === null)
    this.toastr.error('Please select the display order');
  //   if(this.categoryForm.get('display_order').value !== null )
  //   //to check display order is unique or not
  //  { let displayOrder = this.categoryForm.get('display_order').value;
  //  this.logger.debug('To check display order is unique or not');
  //   const body = await this.itemCategoryService.isDisplayOrderUnique(displayOrder);

  //   this.isCategoryExists = body['data'] as boolean;
  //   if (this.isCategoryExists) {
  //     this.categoryForm.get('display_order').setValue('');
  //   }
  // }
    if (this.categoryForm.valid && this.isValidDesktopImage && this.isValidDeviceImage && this.isValidAppImage) {
      this.categoryForm.get('desktopImageFileContent').setValue(this.desktopImageFileContent);
      this.categoryForm.get('deviceImageFileContent').setValue(this.deviceImageFileContent);
      this.categoryForm.get('appImageFileContent').setValue(this.appImageFileContent);
      this.categoryForm.value.UpdatedValues = this.itemDetailstoBeUpdated;
      this.itemCategoryService.createNewCategory(this.categoryForm.value).subscribe((result: { status: string, message: string, data }) => {
        if (result.status === 'success') {
          if(this.itemDetailstoBeUpdated)
          this.logger.debug('New Category has been created');
          this.toastr.success('New Category has been created');
        }
      },
        (error) => {
          this.toastr.error('Some error occured');
          this.logger.error(error);
        },
      );
      this.modalRef2.hide();
    }
    else {
      this.categoryForm.controls['product_category'].markAllAsTouched();
      this.categoryForm.controls['display_order'].markAllAsTouched();
      this.categoryForm.controls['desktopImage'].markAllAsTouched();
      this.categoryForm.controls['deviceImage'].markAllAsTouched();
      this.categoryForm.controls['appImage'].markAllAsTouched();
    }
  }
  get product_category() { return this.categoryForm.get('product_category') }
  get display_order() { return this.categoryForm.get('display_order') }
  get desktopImage() { return this.categoryForm.get('desktopImage') }
  get deviceImage() { return this.categoryForm.get('deviceImage') }
  get appImage() { return this.categoryForm.get('appImage') }
 cancel() {
   this.modalRef2.hide();
 }
}