import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";
import {EnvProperties} from "../../../openaireLibrary/utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {EditCommunityComponent} from "./edit-community/edit-community.component";
import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
import {Title} from "@angular/platform-browser";
import {Subscription} from "rxjs";

@Component({
  selector: 'community-profile',
  template: `
    <div page-content>
      <div header>
        <community-info tab="profile"></community-info>
      </div>
      <div inner>
        <div class="uk-card-header">
          <div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
            <div>
              <div class="uk-text-small title">
                Manage Community Profile
              </div>
              <div>
                <span *ngIf="community" class="uk-text-bold">{{community.shortTitle}}</span>
                <span *ngIf="editCommunityComponent.dirty && !loading"> (unsaved changes)</span>
              </div>
            </div>
            <div class="uk-text-right@m uk-text-center">
              <button class="uk-button uk-button-secondary outlined uk-margin-right"
                      (click)="reset()"
                      [disabled]="loading || !editCommunityComponent.dirty">Reset
              </button>
              <button class="uk-button uk-button-secondary"
                      (click)="save()"
                      [disabled]="loading || editCommunityComponent.disabled">Save
              </button>
            </div>
          </div>
        </div>
        <div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
          <div [class.hidden]="loading">
            <edit-community #editCommunityComponent [maxHeight]="'60vh'" [paddingLarge]="true"></edit-community>
          </div>
          <div *ngIf="loading" class="uk-position-center">
            <loading></loading>
          </div>
        </div>
      </div>
    </div>
  `
})
export class ProfileComponent implements OnInit, OnDestroy {
  
  public community: CommunityInfo;
  public properties: EnvProperties = properties;
  public loading: boolean = false;
  private subscriptions: any[] = [];
  @ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent;
  
  constructor(private communityService: CommunityService,
              private title: Title) {
  }
  
  ngOnInit() {
    this.loading = true;
    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
      this.community = community;
      if (this.community) {
        this.title.setTitle(this.community.communityId.toUpperCase() + " | Profile");
        setTimeout(() => {
          this.reset();
          this.loading = false;
        }, 200);
      }
    }));
  }
  
  public reset() {
    this.editCommunityComponent.init(this.community);
  }
  
  public save() {
    this.loading = true;
    this.editCommunityComponent.save((community) => {
      this.community = community;
      this.reset();
      this.loading = false;
    }, (error) => {
      this.loading = false;
    });
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
}