import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Title} from '@angular/platform-browser';
import {PiwikService}           from '../openaireLibrary/utils/piwik/piwik.service';
import {EnvProperties}          from '../openaireLibrary/utils/properties/env-properties';
import {FAQ} from "../openaireLibrary/utils/entities/FAQ";

@Component({
    selector: 'learn-how',
    template: `
      <div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" 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="">
        <div  style=" min-height: calc(7.89999px + 60vh);"
              class="uk-section uk-padding-remove-bottom" >
            <div class="uk-container uk-container-large uk-section">
              <div class="uk-margin-large-top" uk-grid>
                <h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
                <h5 class="uk-width-1-2@l uk-width-1-1@s">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</h5>
              </div>
            </div>
            <div class="uk-section-muted"> <!--background-->
              <div class="uk-container uk-container-large">
                <gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
              </div>
            </div>
            <div class="uk-container uk-container-large">
              <gif-slider [gifs]="second"></gif-slider>
            </div>
            <div class="uk-section-muted"> <!--background-->
              <div class="uk-container uk-container-large uk-section">
                <div class="uk-flex uk-flex-middle" uk-grid>
                  <div class="uk-width-1-2">
                    <h1>We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
                    <span>Get in touch with our team to find out how.</span>
                    <div class="uk-margin-top">
                      <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact"> CONTACT US</a>
                    </div>
                  </div>
                  <div class="uk-width-1-2">
                    eikona
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="questions.length > 0" class="uk-container">
              <h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
              <div class="uk-width-1-1 uk-section">
                <ul uk-accordion>
                  <li *ngFor="let question of questions; let i=index" [ngClass]="(i===0)?'uk-open':''">
                    <a class="uk-accordion-title">{{question.question}}</a>
                    <div class="uk-accordion-content uk-height-max-small uk-overflow-auto">
                      <p>{{question.answer}} 
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
        </div>
      </div>
    `
  })
export class LearnHowComponent {
  public piwiksub: any;
  questions: FAQ[] = [
    {
      question: 'Why should my company do a design sprint?',
      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing 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.'
    },
    {
      question: 'Why should my company do a design sprint?',
      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing 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.'
    },
    {
      question: 'Why should my company do a design sprint?',
      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing 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.'
    },
    {
      question: 'Why should my company do a design sprint?',
      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing 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.'
    }
  ];
  public first: {"gif": string, "header": string, "text"}[] = [];
  public second: {"gif": string, "header": string, "text"}[] = [];


  private pageTitle = "OpenAIRE - Connect | Learn How";

  properties:EnvProperties;

  constructor (
      private route: ActivatedRoute,
      private _router: Router,
      private _title: Title,
      private _piwikService: PiwikService) {
          var description = "OpenAIRE - Connect, Community Dashboard, research community";
          this._title.setTitle(this.pageTitle);
  }

  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, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
            }
          });
          this.createGifs();
  }

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

  private createGifs() {
    this.first.push({
      gif: "../../../../assets/Connect%20animations.gif",
      header: "Research Community Dashboard",
      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
    });
    this.first.push({
      gif: "../../../../assets/admin-portal.png",
      header: "Research Community Dashboard 2",
      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
    });
    this.first.push({
      gif: "../../../../assets/banner connect.jpg",
      header: "Research Community Dashboard 3",
      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
    });

    this.second.push({
      gif: "../../../../assets/Connect%20animations.gif",
      header: "Research Community Dashboard",
      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
    });
    this.second.push({
      gif: "../../../../assets/admin-portal.png",
      header: "Research Community Dashboard 2",
      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
    });
    this.second.push({
      gif: "../../../../assets/banner connect.jpg",
      header: "Research Community Dashboard 3",
      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
    });
  }
}