import {Component, Input, ViewChild} from "@angular/core";
import {StringUtils} from "../string-utils.class";
import {RouterHelper} from "../routerHelper.class";
import {properties} from "../../../../environments/environment";

@Component({
  selector: 'entity-actions',
  template: `
    <div class="uk-grid uk-grid-small uk-child-width-auto" uk-grid>
      <a *ngIf="linking"
         [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'], [id,type,linkTo])"
         routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
         [title]="'Link this '+getTypeName()+' to ...'"
         [attr.uk-tooltip]="'pos: bottom; cls: uk-active  uk-text-small uk-padding-small'"
         class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
        <icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
        <span class="uk-margin-xsmall-left">Link to</span>
      </a>
      <a *ngIf="share" (click)="openAddThisModal()"
         class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
        <icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
        <span class="uk-margin-xsmall-left">Share</span>
      </a>
      <a *ngIf="cite" (click)="openCiteModal()"
         class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
        <icon [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
        <span class="uk-margin-xsmall-left">Cite</span>
      </a>
      <ng-content></ng-content>
    </div>
    <modal-alert *ngIf="cite" #citeModal>
      <citeThis *ngIf="citeThisClicked" [result]="result" [id]="id"
                [type]="getTypeName().toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
    </modal-alert>
    <modal-alert *ngIf="share" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
      <addThis [url]="url"></addThis>
    </modal-alert>
  `
})
export class EntityActionsComponent {
  @Input() result: any;
  @Input() type: string;
  @Input() id: string;
  @Input() linking: boolean = false;
  @Input() share: boolean = false;
  @Input() cite: boolean = false;
  @Input() url: string;
  public piwikSiteId = properties.piwikSiteId;
  public citeThisClicked: boolean;
  public routerHelper: RouterHelper = new RouterHelper();
  @ViewChild('citeModal') citeModal;
  @ViewChild('addThisModal') addThisModal;

  constructor() {
  }

  get linkTo():string {
    return this.type === 'project'?'result':'project';
  }

  public getTypeName(): string {
    return StringUtils.getEntityName(this.type, false);
  }

  public openCiteModal() {
    this.citeThisClicked = true;
    this.citeModal.cancelButton = false;
    this.citeModal.okButton = false;
    this.citeModal.alertTitle = "Cite this " + this.getTypeName();
    this.citeModal.open();
  }

  public openAddThisModal() {
    console.log(this.url);
    this.addThisModal.cancelButton = false;
    this.addThisModal.okButton = false;
    this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";
    this.addThisModal.open();
  }
}