import { Component, OnInit, EventEmitter, Input } 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 { DeleteCategoryComponent } from './delete-category/delete-category.component';

@Component({
  selector: 'edit-new-category-modal',
  templateUrl: './edit-category-modal.component.html',
  styleUrls: ['./edit-category-modal.component.css']
})
export class EditCategoryModalComponent implements OnInit {
  categoryForm: FormGroup;
  modalRef: BsModalRef;
  message: string;
  confirm: boolean;
  isCategoryExists: boolean;
  deletedCategory: any;
  isValidDesktopImage = false;
  isValidDeviceImage = false;
  isValidAppImage = false;

  desktopImageFileContent: string;
  deviceImageFileContent: string;
  appImageFileContent: string;

  //deleteSliderRef
  deleteCategoryRef: BsModalRef;

  productCategories: any[];
  fallbackCategories: any[];
  @Input() title: string;
  @Input() popupType: string;
  @Input() caption: string;
  public event: EventEmitter<any> = new EventEmitter();
  constructor(private modalService: BsModalService, public bsModalRef: BsModalRef,private logger: NGXLogger, private toastr: ToastrService, private fb: FormBuilder, private itemCategoryService: ItemCategoryService, private fileUploadService: FileUploadService
  ) {
    // Binding categories
    this.itemCategoryService.getAllItem_Categories().subscribe( categories => {
      // tslint:disable-next-line: no-string-literal
      this.productCategories = categories['data'] as any[];
      this.fallbackCategories = [{'product_category': 'Home Slider'}, {'product_category':'Item Compact View'}, {'product_category':'Item Detailed View'}, {'product_category':'Category Card'}];
    });
  }
  ngOnInit(): void {
    this.categoryForm = this.fb.group({
      desktopImage: [''],
      deviceImage: [''],
      appImage: [''],
      desktopImageFileContent: [''],
      deviceImageFileContent: [''],
      appImageFileContent: [''],
      product_category:['', Validators.required]
    });
  }

// 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 a form is submitted
  */
  async onSubmit() {
    if(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['desktopImage'].markAllAsTouched(); 
      this.categoryForm.controls['deviceImage'].markAllAsTouched(); 
      this.categoryForm.controls['appImage'].markAllAsTouched(); 
    }
    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.get('product_category').setValue(this.product_category.value);
      this.categoryForm.value.ItemCategory = this.popupType === 'Edit' ? true : false;
      this.itemCategoryService.updateCategoryImages(this.categoryForm.value).subscribe((result: { status: string, message: string, data }) => {
        if (result.status === 'success') {
          if(this.popupType==='Edit'){
            this.logger.debug('Category images has been updated');
            this.toastr.success('Category images has been updated');
          }else{
            this.logger.debug('Fallback Image has been updated');
            this.toastr.success('Fallback Image has been updated');
          }
        }
      },
        (error) => {
          this.toastr.error('Some error occured');
          this.logger.error(error);
          
        },

      );
      this.bsModalRef.hide();
    }
    else {
      this.categoryForm.controls['desktopImage'].markAllAsTouched();
      this.categoryForm.controls['deviceImage'].markAllAsTouched();
      this.categoryForm.controls['appImage'].markAllAsTouched();
      this.categoryForm.controls['product_category'].markAllAsTouched();
    }
  }

  deleteEditCategory(){
    this.deleteCategoryRef = this.modalService.show(DeleteCategoryComponent);
    this.deleteCategoryRef.content.event.subscribe(modelResult => {
      this.deletedCategory = modelResult;
      if(this.deletedCategory){
        this.productCategories = this.productCategories.filter(category => category.product_category !== this.deletedCategory);
      }
    });
  }

  get desktopImage() { return this.categoryForm.get('desktopImage') }
  get deviceImage() { return this.categoryForm.get('deviceImage') }
  get appImage() { return this.categoryForm.get('appImage') }
  get product_category() { return this.categoryForm.get('product_category') }

}