import { Component, EventEmitter, Input, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { NGXLogger } from 'ngx-logger';
import { ToastrService } from 'ngx-toastr';
import { FileUploadService } from '../../../services/fileupload.service';
import { ItemCategoryService } from '../../../services/item.category.service';
import { ItemService } from '../../../services/item.service';
import { DeleteSliderComponent } from './delete-slider/delete-slider.component';
import { HomesliderOrderComponent } from './homeslider-order/homeslider-order.component';

@Component({
  selector: 'app-home-sliders',
  templateUrl: './home-sliders.component.html',
  styleUrls: ['./home-sliders.component.css']
})
export class HomeSlidersComponent implements OnInit {
  sliderForm: FormGroup;
  modalRef: BsModalRef;
  message: string;
  isInfo: boolean;
  isCategory: boolean;
  @Input() title: string;
  @ViewChild('multiSelect') multiSelect;
  dropdownSettings: IDropdownSettings = {};
  itemCategories: any[];
  dropdownList = [];
  sliderDetailstoBeUpdated: any = {};
  allCategoryItems:any[];
  categoryDisplayModalRef: BsModalRef;
  deletedSliderId: any;

  public event: EventEmitter<any> = new EventEmitter();

  //Slider image for desktop view
  isValidDesktopSliderImage = true;
  desktopSliderImageFileContent;

  //Slider image for device view
  isValidDeviceSliderImage = true;
  deviceSliderImageFileContent;

  //Slider image for app view
  isValidAppSliderImage = true;
  appSliderImageFileContent ;

  //deleteSliderRef
  deleteSliderRef: BsModalRef;

  constructor(public bsModalRef: BsModalRef,private modalService:BsModalService, private logger: NGXLogger, private itemService: ItemService, private toastr: ToastrService, private fb: FormBuilder, private itemCategoryService: ItemCategoryService, private fileUploadService: FileUploadService
  ) {
    this.itemCategoryService.getSliders().subscribe((result: { status: string, message: string, data }) => {
      this.allCategoryItems = result.data.map((term) => {
        return {
          name: term.home_slider_name,
          displayOrder: term.home_slider_order,
          slider_id: term.home_slider_id
        }
      });
    });
  }
  ngOnInit(): void {
     // Binding categories
     this.itemCategoryService.getAllItem_Categories().subscribe(
      categories => {
        // tslint:disable-next-line: no-string-literal
        this.itemCategories = categories['data'] as any[];
      });
    this.dropdownSettings = {
      singleSelection: false,
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      idField: 'item_id',
      textField: 'item_name',
      maxHeight: 197,
      itemsShowLimit: 3,
      allowSearchFilter: true
    };
    this.sliderForm = this.fb.group({
      homeSlideName: ['', { validators: [Validators.required, Validators.pattern("^[a-zA-Z ]*$")] }],
      slideType: ['is_item'],
      selectedItems: ['', Validators.required],
      category_name: ['', Validators.required],
      desktopSliderImage: ['', Validators.required],
      deviceSliderImage: ['', Validators.required],
      appSliderImage: ['', Validators.required],
      home_slider_order: [, { validators: [Validators.required, Validators.pattern("^[0-9]*$")] }]
    });
  }

  //Validate and get slider image content for device screen
  validateAndGetDeviceSliderImageContent(event) {
    const files = event.target.files;
    this.isValidDeviceSliderImage = true;
    if (files && files.length > 0) {
      for (const file of files) {
        this.fileUploadService.isValidImageFile(file, (isValid) => {
          if (isValid) {
            this.fileUploadService.getImageBinaryString(file, (content) => {
              this.deviceSliderImageFileContent = content;
            })
          }
          else {
            this.isValidDeviceSliderImage = false;
          }
        })
      }
    }
    else
      this.isValidDeviceSliderImage = false;
  }

 //Validate and get slider image content for desktop screen
 validateAndGetDesktopSliderImageContent(event) {
  const files = event.target.files;
  this.isValidDesktopSliderImage = true;

  if (files && files.length > 0) {
    for (const file of files) {
      this.fileUploadService.isValidImageFile(file, (isValid) => {
        if (isValid) {
          this.fileUploadService.getImageBinaryString(file, (content) => {
            this.desktopSliderImageFileContent = content;
          })
        }
        else {
          this.isValidDesktopSliderImage = false;
        }
      })
    }
  }
  else
    this.isValidDesktopSliderImage = false;
}

//Validate and get slider image content for mobile app screen
validateAndGetAppSliderImageContent(event) {
  const files = event.target.files;
  if (files && files.length > 0) {
    for (const file of files) {
      this.fileUploadService.isValidImageFile(file, (isValid) => {
        if (isValid) {
          this.fileUploadService.getImageBinaryString(file, (content) => {
            this.appSliderImageFileContent = content;
              this.isValidAppSliderImage = true;
          })
        }
        else {
          this.isValidAppSliderImage= false;
        }
      })
    }
  }
  else
    this.isValidAppSliderImage = false;
}

  toggleSliderType(slideType) {
    this.sliderForm.get('category_name').setValue('');
    this.sliderForm.get('selectedItems').setValue('');
    this.sliderForm.get('slideType').setValue(slideType);
    if (slideType === 'is_informative') {
      this.isInfo = true;
      this.isCategory = false;
      this.dropdownList =[];
      this.sliderForm.get('category_name').setValue(null);
      this.removeValidators();
      this.setAndUpdateValidatorsForImages();

    }
    else if (slideType === 'is_category') {
      this.isCategory = true;
      this.isInfo = false;
      this.dropdownList =[];
      this.sliderForm.get('selectedItems').clearValidators();
      this.sliderForm.get('selectedItems').updateValueAndValidity();
      this.sliderForm.get('category_name').setValidators(Validators.required);
      this.sliderForm.get('category_name').updateValueAndValidity();
      this.setAndUpdateValidatorsForImages();
    }
    else {
      this.isInfo = false;
      this.isCategory = false;
      this.setValidators();
    }
  }

  removeValidators() {
    this.sliderForm.get('category_name').clearValidators();
    this.sliderForm.get('category_name').updateValueAndValidity();
    this.sliderForm.get('selectedItems').clearValidators();
    this.sliderForm.get('selectedItems').updateValueAndValidity();
    this.sliderForm.get('desktopSliderImage').clearValidators();
    this.sliderForm.get('desktopSliderImage').updateValueAndValidity();
    this.sliderForm.get('deviceSliderImage').clearValidators();
    this.sliderForm.get('deviceSliderImage').updateValueAndValidity();
    this.sliderForm.get('appSliderImage').clearValidators();
    this.sliderForm.get('appSliderImage').updateValueAndValidity();
  }

  setValidators() {
    this.sliderForm.get('category_name').setValidators(Validators.required);
    this.sliderForm.get('category_name').updateValueAndValidity();
    this.sliderForm.get('selectedItems').setValidators(Validators.required);
    this.sliderForm.get('selectedItems').updateValueAndValidity();
    this.setAndUpdateValidatorsForImages();
  }
  setAndUpdateValidatorsForImages(){
    this.sliderForm.get('desktopSliderImage').setValidators(Validators.required);

    this.sliderForm.get('desktopSliderImage').updateValueAndValidity();
    this.sliderForm.get('deviceSliderImage').setValidators(Validators.required);

    this.sliderForm.get('deviceSliderImage').updateValueAndValidity();
    this.sliderForm.get('appSliderImage').setValidators(Validators.required);

    this.sliderForm.get('appSliderImage').updateValueAndValidity();
  }

  /*
   @usage: called whenever we change the category from the dropdown
   @purpose: based on category selcted subcategories are fetched
   */
  onCategoryChanged(categoryObj) {

    if (this.sliderForm.get('category_name').value) {
      if(this.sliderForm.get('slideType').value === 'is_item')
      {
        this.sliderForm.get('selectedItems').setValue('');
        this.itemService.getAllSelectedCategoryItems(categoryObj.product_category).subscribe((result: { status: string, message: string, data }) => {
          this.dropdownList =  result.data;
        });
      }
    }
  }

  /*
  @usage: called whenever homeslider collection needs to be updated
  */
  updateHomeSlideInCache(sliderObj){
    let homeSliderCollection = JSON.parse(localStorage.getItem('sliders'));
    homeSliderCollection.push(sliderObj);
    localStorage.sliders = JSON.stringify(homeSliderCollection);
  }
  /*
      @usage: called on blur of slider name feild
      @purpose: to check the name is already exsits or not.
    */
  async checkDuplicateName() {
    if (this.sliderForm.get('homeSlideName').value) {
      let sliderName = this.sliderForm.get('homeSlideName').value.toString().trim();

      // Duplicate slider name check
      const body = await this.itemService.isSliderExists(sliderName);

      let sliderExist = body['data'] as boolean;
      if (sliderExist) {
        this.sliderForm.get('homeSlideName').setValue('');
      }
    }
  }

  /*
     @usage: called when a form is submitted
   */
  async onSubmit() {
    if (this.sliderForm.get('home_slider_order').value === '' || this.sliderForm.get('category_name').value === '' || this.sliderForm.get('selectedItems').value === '') {
      this.sliderForm.controls['category_name'].markAllAsTouched();
      this.sliderForm.controls['selectedItems'].markAllAsTouched();
      this.sliderForm.controls['home_slider_order'].markAllAsTouched();
    }
    if(this.sliderForm.get('home_slider_order').value === null)
      this.toastr.error('Please select the display order');
    if (this.sliderForm.valid
      && this.desktopSliderImageFileContent
      && this.deviceSliderImageFileContent
      && this.appSliderImageFileContent && this.isValidAppSliderImage && this.isValidDeviceSliderImage && this.isValidDesktopSliderImage) {
      
      this.sliderForm.value.desktopSliderImageFileContent = this.desktopSliderImageFileContent;
      this.sliderForm.value.deviceSliderImageFileContent = this.deviceSliderImageFileContent;
       this.sliderForm.value.appSliderImageFileContent = this.appSliderImageFileContent;
       this.sliderForm.value.UpdatedValues = this.sliderDetailstoBeUpdated;
      this.itemCategoryService.createHomeSlider(this.sliderForm.value).subscribe((result: { status: string, message: string, data }) => {
        if (result.status === 'success') {
          this.updateHomeSlideInCache(result.data);
          this.toastr.success('Home slider has been created');
        }
      },
        (error) => {
          this.toastr.error('Some error occured');
          this.logger.error(error);

        },
      );
      this.bsModalRef.hide();
    }
    else {
      this.sliderForm.controls['homeSlideName'].markAsTouched();
      this.sliderForm.controls['selectedItems'].markAsTouched();
      this.sliderForm.controls['category_name'].markAsTouched();
      this.sliderForm.controls['desktopSliderImage'].markAsTouched();
      this.sliderForm.controls['deviceSliderImage'].markAsTouched();
      this.sliderForm.controls['appSliderImage'].markAsTouched();
    }
  }
  deleteExisitingSlider() {
    this.deleteSliderRef = this.modalService.show(DeleteSliderComponent);
    this.deleteSliderRef.content.event.subscribe(modelResult => {
      this.deletedSliderId = modelResult;
      if(this.deletedSliderId){
        this.allCategoryItems = this.allCategoryItems.filter(category => category.slider_id !== this.deletedSliderId);
      }
    });
  }
    /*
  @usage: called when select display order link is clicked
  @purpose: to set the display order of all the items
  */
 selectDisplayOrder() {
  if (this.sliderForm.get('homeSlideName').value) {

    if (this.sliderDetailstoBeUpdated.length > 0) {
      this.allCategoryItems = this.sliderDetailstoBeUpdated;
      for (var i = 0; i < this.sliderDetailstoBeUpdated.length; i++) {
        this.allCategoryItems[i].displayOrder = this.sliderDetailstoBeUpdated[i].home_slider_order;
        this.allCategoryItems[i].name = this.sliderDetailstoBeUpdated[i].home_slider_name;

      }
    }
    this.categoryDisplayModalRef = this.modalService.show(HomesliderOrderComponent, {
      backdrop: 'static',
      keyboard: false,
      animated: true,
      ignoreBackdropClick: true,
      initialState: {
        title: 'Display Order',
        items: this.allCategoryItems,
        itemName: this.sliderForm.get('homeSlideName').value,
        displayOrder: this.sliderForm.get('home_slider_order').value,
        config: "{ backdrop: 'static' }",
      }
    });
    this.categoryDisplayModalRef.content.event.subscribe(modelResult => {
      this.sliderDetailstoBeUpdated = modelResult;
      console.log(this.sliderDetailstoBeUpdated[0]);
      this.sliderForm.get('homeSlideName').setValue(this.sliderDetailstoBeUpdated[0].home_slider_name);
      this.sliderForm.get('home_slider_order').setValue(this.sliderDetailstoBeUpdated[0].home_slider_order);
      this.sliderDetailstoBeUpdated.shift();

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


}
  get homeSlideName() { return this.sliderForm.get('homeSlideName') }
  get slideType() { return this.sliderForm.get('slideType') }
  get selectedItems() { return this.sliderForm.get('selectedItems') }
  get category_name() { return this.sliderForm.get('category_name') }
  get desktopSliderImage() { return this.sliderForm.get('desktopSliderImage') }
  get deviceSliderImage() { return this.sliderForm.get('deviceSliderImage') }
  get appSliderImage() { return this.sliderForm.get('appSliderImage') }
  get home_slider_order() { return this.sliderForm.get('home_slider_order') }
}