import {Component, OnInit} 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";
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {Subscriber} from "rxjs";
import {properties} from "../../environments/environment";

@Component({
  selector: 'learn-how',
  template: `
    <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
    <ng-template #one>
      <h6 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h6>
      <div>First, we learn about your requirements and challenges. We help you understand Open Science practices within
        EOSC and together we&rsquo;ll talk about how OpenAIRE RCD fits as a solution.
      </div>
    </ng-template>
    <ng-template #two>
      <h6 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h6>
      <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&rsquo;ll
        have defined the basic configuration of your Community Gateway.
      </div>
    </ng-template>
    <ng-template #three>
      <h6 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h6>
      <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>
      <h6 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h6>
      <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" style="background-color: #E2EEFA;">
      <div class="uk-section uk-padding-remove-bottom uk-container uk-container-large">
        <div class="uk-padding-small">
          <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
        </div>
      </div>
    </div>
    <div class="uk-section uk-padding-remove-top"
         style="background: transparent linear-gradient(0deg, #FAFAFA 0%, #E2EEFA 100%) !important;">
      <div class="uk-container uk-container-large uk-margin-top">
        <div class="uk-padding-small">
          <h1 class="uk-width-1-1 uk-text-light">Learn the process.</h1>
          <div class="uk-width-1-2@l uk-width-1-1@s uk-text-large uk-margin-top">Build a <span class="uk-text-bold portal-color">Gateway to your
            community&#39;s</span> open and linked research outcomes. Customized to your needs.
          </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"
               uk-grid="">
            <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s uk-grid uk-first-column uk-grid-stack"
                 uk-grid="">
              <div class="uk-first-column">
                <ng-container [ngTemplateOutlet]="one"></ng-container>
              </div>

              <div class="uk-visible@m uk-grid-margin uk-first-column">
                <ng-container [ngTemplateOutlet]="four"></ng-container>
              </div>

              <div class="uk-hidden@m">
                <ng-container [ngTemplateOutlet]="two"></ng-container>
              </div>
            </div>

            <div class="uk-text-center"><img src="assets/connect-assets/about/cycle.svg"/></div>

            <div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s uk-grid uk-grid-stack" uk-grid="">
              <div class="uk-visible@m uk-first-column">
                <ng-container [ngTemplateOutlet]="two"></ng-container>
              </div>

              <div class="uk-hidden@m uk-visible@s">
                <ng-container [ngTemplateOutlet]="four"></ng-container>
              </div>

              <div class="uk-grid-margin uk-first-column">
                <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" routerLink="/about/learn-in-depth">Learn more
            details ></a>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-section uk-container uk-container-large">
      <div class="uk-padding-small">
        <div class="uk-slider"
             uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">
          <div class="uk-slider-container">
            <ul class="uk-slider-items uk-child-width-1-1" style="transform: translate3d(0px, 0px, 0px);">
              <li class="ng-star-inserted uk-active" tabindex="-1">
                <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
                  <div class="uk-first-column">
                    <img class="uk-border-rounded uk-box-shadow-large"
                         src="assets/connect-assets/about/gifs/profile.gif"/>
                  </div>
                  <div class="uk-margin-top">
                    <div>
                      <h4 class="">Profile</h4>
                      <div class="uk-margin-medium ">Edit community information, change logo url, add
                        community managers or organizations related to community.
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li tabindex="-1">
                <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
                  <div class="uk-first-column">
                    <img class="uk-border-rounded uk-box-shadow-large"
                         src="assets/connect-assets/about/gifs/content.gif"/>
                  </div>
                  <div class="uk-margin-top">
                    <div>
                      <h4 class="">Content</h4>
                      <div class="uk-margin-medium ">Manage projects, content providers, subjects and
                        zenodo communities that are related to the research community.
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li tabindex="-1">
                <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
                  <div class="uk-first-column">
                    <img class="uk-border-rounded uk-box-shadow-large"
                         src="assets/connect-assets/about/gifs/statistics.gif"/>
                  </div>
                  <div class="uk-margin-top">
                    <div>
                      <h4 class="">Statistics &amp; Charts</h4>
                      <div class="uk-margin-medium ">Manage statistical numbers &amp; charts that will be
                        displayed in the community overview and graph analysis views.
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li tabindex="-1">
                <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
                  <div class="uk-first-column">
                    <img class="uk-border-rounded uk-box-shadow-large"
                         src="assets/connect-assets/about/gifs/links.gif"/>
                  </div>
                  <div class="uk-margin-top">
                    <div>
                      <h4 class="">Links</h4>
                      <div class="uk-margin-medium ">Manage user claims related to the research
                        community.
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li tabindex="-1">
                <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
                  <div class="uk-first-column">
                    <img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/about/gifs/help.gif"/>
                  </div>
                  <div class="uk-margin-top">
                    <div>
                      <h4 class="">Help texts</h4>
                      <div class="uk-margin-medium ">Add or edit help text in research community pages.
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li tabindex="-1">
                <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
                  <div class="uk-first-column">
                    <img class="uk-border-rounded uk-box-shadow-large"
                         src="assets/connect-assets/about/gifs/users.gif"/>
                  </div>
                  <div class="uk-margin-top">
                    <div>
                      <h4 class="">Users</h4>
                      <div class="uk-margin-medium ">Invite more users to subscribe, manage community
                        subscribers, your personal info and notification settings.
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">
              <li class="uk-active" uk-slider-item="0"></li>
              <li uk-slider-item="1"></li>
              <li uk-slider-item="2"></li>
              <li uk-slider-item="3"></li>
              <li uk-slider-item="4"></li>
              <li uk-slider-item="5"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="uk-section" style="background-color: #D9D8E8;">-->
    <div class="uk-section contactUsBackground">
      <div class="uk-container uk-text-center">
<!--        <div class="uk-padding-small">-->
<!--          <div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">-->
<!--            <div class="uk-width-expand uk-first-column">-->
              <h3>Get in touch with our team</h3>
              <div class="uk-margin-medium">We look forward to working together and helping you unlock the
                full 
                <br/>
                potential of your research community through open science.
              </div>
              <div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">Contact us</a></div>
<!--            </div>-->
<!--            <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m"><img src="assets/connect-assets/contact/3.png"-->
<!--                                                                           style="width:263px"/></div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
  `
})
export class LearnHowComponent implements OnInit {
  public pageContents = null;
  public divContents = null;
  
  public url: string = null;
  public pageTitle: string = "OpenAIRE - Connect | Learn How";
  public pageDescription: string = "Learn the process: Build a Gateway to your community's open and linked research outcomes. Customized to your needs.";
  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about'}];
  
  properties: EnvProperties;
  subscriptions = [];
  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.properties = properties
        
        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
          this.subscriptions.push(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(this.pageDescription);
        
        //this.getDivContents();
        this.getPageContents();

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

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
  }

  
  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'");
  }
}
