import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";

@Component({
  selector: 'learn-how',
  template: `
    <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>

    <ng-template #one>
      <h5 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h5>
      <div>
        First, we learn about your requirements and challenges. We help you understand Open Science practices within
        EOSC and together we’ll talk about how OpenAIRE RCD fits as a solution.
      </div>
    </ng-template>
    <ng-template #two>
      <h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
      <div>
        How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes
        and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic
        configuration of your Community Gateway.
      </div>
    </ng-template>
    <ng-template #three>
      <h5 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h5>
      <div>
        You validate and test your new Community Gateway (portal) with your experts and community to ensure all
        workflows are in place and quality of data meets your standards. If needed, we work together in another
        iteration to further refine and adapt to your needs.
      </div>
    </ng-template>
    <ng-template #four>
      <h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
      <div>
        We jointly roll out your new Community Gateway. You take over the business operations and start engaging your
        researchers, we take care of the smooth operation of the e-service.
      </div>
    </ng-template>
    <div class="image-front-topbar"
         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
         tm-header-transparent="light" tm-header-transparent-placeholder="">
      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
              [texts]="pageContents['top']"></helper>
      <!--<div style=" min-height: calc(7.89999px + 60vh); background-image: url('assets/about/background.png') !important;"
           class="uk-section uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color">
        <div class="uk-container uk-container-large uk-section uk-margin-top uk-padding-remove-top">
          <div class="uk-margin-large-top uk-grid">
            <h1 class="uk-width-1-1 font-41 uk-text-bold">Learn the process</h1>
            <div class="uk-width-1-2@l uk-width-1-1@s uk-h5 uk-margin-top">Build a <b>Gateway to your community's</b>
              open and linked research outcomes. Customized to your needs.
            </div>
          </div>
          <div class="uk-margin-large-top uk-flex uk-child-width-1-3@m uk-child-width-1-1@s uk-flex-center" uk-grid>
            <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
              <div>
                <ng-container *ngTemplateOutlet="one"></ng-container>
              </div>
              <div class="uk-visible@m">
                <ng-container *ngTemplateOutlet="four"></ng-container>
              </div>
              <div class="uk-hidden@m">
                <ng-container *ngTemplateOutlet="two"></ng-container>
              </div>
            </div>
            <div>
              <img src="../../assets/about/cycle.png">
            </div>
            <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
              <div class="uk-visible@m">
                <ng-container *ngTemplateOutlet="two"></ng-container>
              </div>
              <div class="uk-hidden@m uk-visible@s">
                <ng-container *ngTemplateOutlet="four"></ng-container>
              </div>
              <div>
                <ng-container *ngTemplateOutlet="three"></ng-container>
              </div>
              <div class="uk-hidden@s uk-visible@xs">
                <ng-container *ngTemplateOutlet="four"></ng-container>
              </div>
            </div>
          </div>
          <div class="uk-width-1-1 uk-text-center uk-text-large uk-margin-large-top">
            <a class="uk-button portal-button uk-text-uppercase" routerLinkActive="router-link-active"
               routerLink="/about/learn-in-depth"> Learn more details</a>
          </div>
        </div>
      </div>
      <div style="background-image: url('assets/cloud/abstract.png') !important;"
        class="uk-background-norepeat uk-section uk-background-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
        <div class="uk-container uk-container-large">
          <gif-slider [gifs]="gifs"></gif-slider>
        </div>
      </div>
      <div style="background-color: #CFDEF1;"
        class="uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
        <div class="uk-container uk-container-large uk-section">
          <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
            <div class="uk-width-expand">
              <div class="uk-text-bold uk-h4">We look forward to working together and helping you unlock the full
                potential of your research community through open science.
              </div>
              <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
              <div class="uk-inline">
                <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us">
                  CONTACT US</a>
              </div>
            </div>
            <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
              <img width="263" height="250" src="assets/connect-assets/contact/3.png">
            </div>
          </div>
        </div>
      </div>-->
    </div>
  `
})
export class LearnHowComponent {
  public piwiksub: any;
  public gifs: { "gif": string, "header": string, "text" }[] = [];
  public pageContents = null;
  public divContents = null;

  public url: string = null;
  public pageTitle: string = "OpenAIRE - Connect | Learn How";

  properties: EnvProperties;

  constructor(
    private route: ActivatedRoute,
    private _router: Router,
    private _meta: Meta,
    private _title: Title,
    private seoService: SEOService,
    private _piwikService: PiwikService,
    private helper: HelperService) {}

  public ngOnInit() {
    this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {
        this.properties = data.envSpecific;

        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
          this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe();
        }
        this.url = this.properties.baseLink + this._router.url;
        this.seoService.createLinkForCanonicalURL(this.url);
        this.updateUrl(this.url);
        this.updateTitle(this.pageTitle);
        this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");

        //this.getDivContents();
        this.getPageContents();
      });
    this.createGifs();
  }

  private getPageContents() {
    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
      this.pageContents = contents;
    })
  }

  private getDivContents() {
    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
      this.divContents = contents;
    })
  }

  public ngOnDestroy() {
    if (this.piwiksub) {
      this.piwiksub.unsubscribe();
    }
  }

  private createGifs() {
    this.gifs.push({
      gif: "assets/connect-assets/about/gifs/profile.gif",
      header: "Profile",
      text: "Edit community information, change logo url, add community managers or organizations related to community."
    });
    this.gifs.push({
      gif: "assets/connect-assets/about/gifs/content.gif",
      header: "Content",
      text: "Manage projects, content providers, subjects and zenodo communities that are related to the research community."
    });
    this.gifs.push({
      gif: "assets/connect-assets/about/gifs/statistics.gif",
      header: "Statistics & Charts",
      text: "Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views."
    });
    this.gifs.push({
      gif: "assets/connect-assets/about/gifs/links.gif",
      header: "Links",
      text: " Manage user claims related to the research community."
    });
    this.gifs.push({
      gif: "assets/connect-assets/about/gifs/help.gif",
      header: " Help texts",
      text: "Add or edit help text in research community pages."
    });
    this.gifs.push({
      gif: "assets/connect-assets/about/gifs/users.gif",
      header: "Users",
      text: "Invite more users to subscribe, manage community subscribers, your personal info and notification settings."
    });
  }

  private updateDescription(description: string) {
    this._meta.updateTag({content: description}, "name='description'");
    this._meta.updateTag({content: description}, "property='og:description'");
  }

  private updateTitle(title: string) {
    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
    this._title.setTitle(_title);
    this._meta.updateTag({content: _title}, "property='og:title'");
  }

  private updateUrl(url: string) {
    this._meta.updateTag({content: url}, "property='og:url'");
  }
}