import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';

import {Session} from '../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
import {DomSanitizer, Title} from '@angular/platform-browser';
import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';
import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
import {LayoutService} from '../../openaireLibrary/services/layout.service';
import {properties} from '../../../environments/environment';
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
import {Subscription} from 'rxjs';
import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
import {MenuItem} from "../../openaireLibrary/sharedComponents/menu";
import {AlertModal} from "../../openaireLibrary/utils/modal/alert";

declare var UIkit;

@Component({
  selector: 'customization',
  templateUrl: './customization.component.html',
  styles:[`
      .functionalities-container{
          padding-left:15px;
      }
    .functionalities-border{
        border-left:  1px solid #EAEAEA;
        padding: 5px 10px;
        margin: 25px 0px;
    }
    
  .refresh-indicator {
    background-color: rgba(0, 0, 0, 0.50);
    border-radius: 4px;
    position: absolute;
    color: white;
  }
  iframe, .refresh-indicator{
      height:100%
  }
  #container{
      position: relative;
      width: 100%;
      overflow: hidden;
      padding-top: 56.25%; /* 16:9 Aspect Ratio */
      background-color:black;
      border-radius:10px;
  }
      #iframecontainer{
 
          position: absolute;
          top: 2%;
          left: 2.5%;
          bottom: 2%;
          right: 2.5%;
          width: 95%;
          height: 96%;
          border: none;
          border-radius:10px;
      }
     
  `]
})

export class CustomizationComponent implements OnInit {
  homeMenu =  {name:"Customization", id : "home", icon: "" }
  menuSelected = this.homeMenu;
  buttonsSelected = 'light';
  color = 'white';
  defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
  publishedLayout: Layout = null;
  publishedCustomizationOptions: CustomizationOptions = null;
  draftCustomizationOptions: CustomizationOptions = null;
  appliedCustomizationOptions: CustomizationOptions = null;
  previewUrl = null;
  previewCustomization = null;
  public showLoading = true;
  public communityId = null;
  public properties: EnvProperties = null;
  private subscriptions: any[] = [];
  public enabled = true;
sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
  {name:"Backgrounds", id : "backgrounds", icon: "wallpaper" },
  {name:"Buttons", id : "buttons", icon: "smart_button" }]
  @ViewChild('leaveModal') closeModal: AlertModal;

  constructor(private element: ElementRef,
              private route: ActivatedRoute,
              private _router: Router,
              private title: Title,
              private sanitizer: DomSanitizer,
              private layoutService: LayoutService,
              private utilsService: UtilitiesService,
              private userManagementService: UserManagementService) {
  }

  ngOnDestroy() {
    this.deleteDraftImages();

  }
  cleanUp(){
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
  ngOnInit() {

    this.properties = properties;
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
      if (!user) {
        this._router.navigate(['/user-info'], {
          queryParams: {
            "errorCode": LoginErrorCodes.NOT_VALID,
            "redirectUrl": this._router.url
          }
        });
      }
    }));

    this.subscriptions.push(this.route.params.subscribe((params) => {
      this.communityId = params['community'];
      if(this.communityId == "covid-19"){
        this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
      }
      this.title.setTitle('Administration Dashboard | Customization');
      this.showLoading = true;
      this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
       this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
       this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
       this.initializeCustomizationOptions(true);
      }, error => {
        this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
        this.initializeCustomizationOptions(true);
         UIkit.notification("An error occured fetching customizations options", {
           status: 'danger',
           timeout: 6000,
           pos: 'bottom-right'
         });
      }));
    }));



  }
  formHasChanges(obj1:CustomizationOptions, obj2:CustomizationOptions){
    return obj1.backgrounds.form.imageUrl != obj2.backgrounds.form.imageUrl ||
      obj1.backgrounds.form.imageFile != obj2.backgrounds.form.imageFile ||
      obj1.backgrounds.form.position != obj2.backgrounds.form.position;
  }
  hasChanges(object1,object2):boolean{
    return JSON.stringify(object1) != JSON.stringify(object2);
  }
  saveLayout() {
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'], {
        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
      });
    }
    this.publishedLayout.layoutOptions = this.draftCustomizationOptions;
    this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
      this.deleteOldImages();
      this.publishedLayout = layout;
      this.publishedCustomizationOptions = layout.layoutOptions;
      this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
      UIkit.notification("Customizations was succesfully saved!", {
        status: 'success',
        timeout: 6000,
        pos: 'bottom-right'
      });
    }, error => {

      UIkit.notification("An error occured on save", {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
    }));
  }
  private deleteOldImages( ) {
    if( this.publishedCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
       this.deleteImage(this.publishedCustomizationOptions.backgrounds.form.imageFile)
    }
  }
  private deleteDraftImages( ) {
    if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
      this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
        re => {
          this.cleanUp()
        }
      ));
    }else{
      this.cleanUp()
    }
  }
  private deleteImage( filename:string) {
    this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe());
  }
  initializeCustomizationOptions(updatePreviewUrl) {
    this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
    this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
    if(updatePreviewUrl){
      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
    }

  }

  applyLayout() {
    this.appliedCustomizationOptions = this.copyObject(this.draftCustomizationOptions);
    if(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization){
      this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
    }
  }

  resetLayout() {
    this.deleteDraftImages();
    this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
  }
  resetBackgroundsTo(backgrounds) {
    this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
    this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
    this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;

  }
  resetImageTo(backgrounds) {
    this.deleteDraftImages();
    this.draftCustomizationOptions.backgrounds.form.imageUrl = backgrounds.form.imageUrl;
    this.draftCustomizationOptions.backgrounds.form.imageFile = backgrounds.form.imageFile;
    this.draftCustomizationOptions.backgrounds.form.position = backgrounds.form.position;
  }

  resetBackgroundsAndButtonsTo(c:CustomizationOptions){
    this.resetBackgroundsTo(c.backgrounds);
    this.resetButtonsTo(c.buttons);
   }
  resetBackgroundsAndButtonsToPublished(){
    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
  }
  resetBackgroundsAndButtonsToDefault(){
    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
    this.updateBackgroundsAndButtonsBasedOnIdentity();
  }

  resetButtonsTo(buttonsToRevert) {
    this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
  }

  resetIdentityTo( original:CustomizationOptions) {
    this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);
    this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);
  }
  resetIdentityToPublished() {
    this.resetIdentityTo( this.publishedCustomizationOptions);
    this.updateBackgroundsAndButtonsBasedOnIdentity()
  }
  resetIdentityToDefault() {
    this.resetIdentityTo( this.defaultCustomizationOptions);
    this.draftCustomizationOptions.identityIsCustom = false;
    this.updateBackgroundsAndButtonsBasedOnIdentity()

  }
  updateBackgroundsAndButtonsBasedOnIdentity(){
    let tmp =   new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
    if(!this.draftCustomizationOptions.backgroundsIsCustom) {
      this.resetBackgroundsTo(tmp.backgrounds);
    }
    if(!this.draftCustomizationOptions.buttonsIsCustom) {
      this.resetButtonsTo(tmp.buttons);
    }
  }
  getCommunityUrlSatinized(layout: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
  }
  getCommunityUrl() {
    return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
    // return "https://example.com"
  }

  getCommunityUrlNewLayout(layout: string) {
    this.previewCustomization = layout;
      return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);
  }

  copyObject(obj) {
    return JSON.parse(JSON.stringify(obj));
  }
  
  changeMenu(  menuSelected){
    this.menuSelected = menuSelected;
  }
  close(){
    if(this.menuSelected.id !='home'){
      this.menuSelected = this.homeMenu;
      return;
    }
    if(!this.hasChanges(this.publishedCustomizationOptions, this.draftCustomizationOptions)) {
      this._router.navigate(["../info/profile"], {relativeTo: this.route});
    }else{
      this.closeModal.alertTitle = "Discard changes";
      this.closeModal.message = "Unsaved changes will be lost.";
      this.closeModal.okButtonText = "Leave";
      this.closeModal.cancelButtonText = "Cancel";
      this.closeModal.okButtonLeft = false;
      this.closeModal.open();
    }
  }

  confirmClose(){
    this._router.navigate(["../info/profile"], {relativeTo: this.route});
  }
}