import {Component, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {CustomizationService} from "../../openaireLibrary/services/customization.service";
import {properties} from "../../../environments/environment";
import {Layout} from "../../openaireLibrary/connect/community/CustomizationOptions";
import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
import {CommunitiesService} from "../../openaireLibrary/connect/communities/communities.service";

declare var UIkit;

@Component({
  selector: 'connect-admin-customization',
  template: `
    <div page-content>
      <div header>
        <div class="uk-flex uk-flex-middle uk-margin-top info">
          <img src="assets/common-assets/placeholder.png" class="uk-margin-right">
          <div>
            <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Options</div>
            <h1 class="uk-h4 uk-margin-remove">Super Admin</h1>
          </div>
        </div>
        <admin-tabs tab="customization" portal="connect"></admin-tabs>
        
      </div>
       
      <div inner>
        <div class="uk-alert uk-alert-warning uk-margin-top ">
          <div class="uk-text-large">Use only after connect deployment. And only if there are css updates!</div>
          Press the following button to update the timestamp in the saved layouts and recreate the css files. 
        </div>
        <button (click)="updateCss()" class="uk-button uk-button-danger" [class.uk-disabled]="savingChanges"> Update CSS</button>
        <button (click)="purgeBrowserCache()" class="uk-button uk-button-danger uk-margin-left" [class.uk-disabled]="savingChanges"> Purge Browser Cache</button>
      </div>
    </div>
    
  `
})
export class ConnectAdminCustomizationComponent implements OnInit {
  private subscriptions: any[] = [];
  savingChanges = false;
  community;
  properties = properties;

  constructor( private customizationService: CustomizationService, private _clearCacheService: ClearCacheService,
               private communitiesService: CommunitiesService) {
  }

  ngOnInit() {
  }
  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
  updateCss(){
    let date = new Date();
    this.savingChanges = true;
    let connectCssIsSaved = false;
    let defaultCssIsSaved = false;
    this.subscriptions.push(this.customizationService.getLayouts(properties, ).subscribe(layouts => {

      for(let layout of layouts){
        layout.date = date;
        if(layout.portalPid == 'connect'){
          connectCssIsSaved = true;
          this.callSaveAndCreate(layout, "connect")
        }else if(layout.portalPid == 'default'){
          defaultCssIsSaved = true;
          this.callSaveAndCreate(layout, "connect")
        }else {
          this.callSaveAndCreate(layout, "community");
        }
      }
      if(!connectCssIsSaved){
        let layout =  new Layout("connect", null);
        layout.date = date;
        this.callSaveAndCreate(layout, "connect")
      }
      if(!defaultCssIsSaved){
        let layout =  new Layout("default", null);
        layout.date = date;
        this.callSaveAndCreate(layout, "connect")
      }
    }));
  }

  callSaveAndCreate(layout, portalType){
    this.subscriptions.push(this.customizationService.saveLayout(properties, layout.portalPid, layout, portalType).subscribe(data =>{
      this.subscriptions.push(this.customizationService.createCSS(layout.portalPid,properties.connectPortalUrl, layout.date.valueOf(), layout.layoutOptions).subscribe(data =>{
        UIkit.notification(layout.portalPid +"-"+ layout.date.valueOf() +  ".css " + " was created successfully! ", {
          status: 'success',
          timeout: 6000,
          pos: 'bottom-right'
        });

      }));
    }));
  }

  purgeBrowserCache() {
    this.subscriptions.push(this.communitiesService.getCommunities(this.properties, this.properties.communityAPI + 'communities').subscribe(
      communities => {
        communities.forEach(community => {
          this._clearCacheService.purgeBrowserCache("Layout added/ updated", community.communityId);
        });
      }
    ));
    this._clearCacheService.purgeBrowserCache("Layout added/ updated", "connect");
  }
}