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 class="uk-container uk-container-large uk-section uk-margin-top">
        <div class="uk-margin-large-top uk-grid">
          <h1 class="uk-width-1-2">Get to know your funding outcome</h1>
          <div class="uk-grid uk-child-width-1-2 uk-margin-large-top  uk-margin-left">
            <div>
              <div class="uk-h4 uk-text-bold">1. Provide us some metadata</div>
              <div>All you need to do is to provide OpenAIRE with a ‘very limited’ set of metadata fields from your database and we will take it up from there.</div>
               
            </div>
            <div class="uk-border-circle uk-margin-large-left uk-margin-large-right" style="border: solid 1px grey; width:200px; height:200px">
            </div>
          </div>
          <div class="uk-grid uk-child-width-1-2 uk-margin-large-top  uk-margin-left">
            <div class="uk-border-circle uk-margin-large-left uk-margin-large-right" style="border: solid 1px grey; width:200px; height:200px">
            </div>
            <div>
              <div class="uk-h4 uk-text-bold">2. Lorem ipsum dolor sit amet</div>
              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
          </div>
          <div class="uk-grid uk-child-width-1-2 uk-margin-large-top  uk-margin-left">
            <div>
              <div class="uk-h4 uk-text-bold">3. Lorem ipsum dolor sit amet</div>
              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
            <div class="uk-border-circle uk-margin-large-left uk-margin-large-right" style="border: solid 1px grey; width:200px; height:200px">
            </div>
          </div>
          
           
        </div>
        <div clas="uk-margin-top">
          <div class="uk-text-bold uk-h1 uk-margin-large-top">
            What are your benefits as a funder
          </div>
          <div class=" uk-grid uk-child-width-1-1@s uk-child-width-1-2@m ">
          
            <div class="uk-text-bold uk-h4 uk-margin-remove-bottom uk-margin-large-top">
              Get a complete view of your funds
            </div>
            <div class="uk-margin-large-top">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              <hr class="uk-margin-large-top">
            </div>
            <div class="uk-text-bold uk-h4 uk-margin-remove-bottom uk-margin-large-top">
              View trends through topics
            </div>
            <div class="uk-margin-large-top">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <hr class="uk-margin-large-top">
            </div>
            <div class="uk-text-bold uk-h4 uk-margin-remove-bottom uk-margin-large-top">
              Make your data work for you
            </div>
          <div class="uk-margin-large-top">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <hr class="uk-margin-large-top">
        </div>
            <div class="uk-text-bold uk-h4 uk-margin-remove-bottom uk-margin-large-top">
              Custom research analytics
            </div>
            <div class="uk-margin-large-top">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              <hr class="uk-margin-large-top">
            </div>
           

          </div>
        </div>
        <div
          class="uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top  " style="">
          <div class="uk-container uk-section">
            <div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">
      

              <div class="uk-width-expand">
                <div class="uk-text-bold uk-h4">
                  <div>Contact us to ...</div>
                </div>

                <div class="uk-margin-medium uk-h5">Get in touch with our team to find out how.</div>

                <div
                  class="uk-inline"><a class="uk-button portal-button uk-button-large" href="/contact-us">CONTACT US</a></div>
              </div>
              <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m uk-first-column portal-background-color " style="width:400px;
       height:250px">
                <img src=""  alt="Image">
              </div>
            </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 - Monitor | 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 - Monitor, Funders, Statistics, EC");

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