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-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-padding-remove-bottom cloud-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
            <div class="uk-section uk-margin-large-top">
              <div class="uk-container uk-container-large">
                  <div class="uk-margin-large-top" uk-grid>
                    <h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
                    <div class="uk-width-1-2@l uk-width-1-1@s uk-text-large">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-middle uk-flex uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
                    <div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
                      <div>
                        <h5 class="uk-text-bold">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>
                      </div>
                      <div class="uk-visible@m">
                        <h5 class=" uk-text-bold">4. Roll out the service</h5>
                        <div>
                          We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
                        </div>
                      </div>
                      <div class="uk-hidden@m">
                        <h5 class=" uk-text-bold">2. Develop a pilot</h5>
                        <div>
                          How do you work today, and how would you like to work tomorrow? We tranlate 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>
                      </div>
                    </div>
                    <div>
                      <img src="../../assets/about/cicle.png">
                    </div>
                    <div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
                      <div class="uk-visible@m">
                        <h5 class=" uk-text-bold">2. Develop a pilot</h5>
                        <div>
                          How do you work today, and how would you like to work tomorrow? We tranlate 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>
                      </div>
                      <div class="uk-hidden@m">
                        <h5 class=" uk-text-bold">4. Roll out the service</h5>
                        <div>
                          We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.                        </div>
                      </div>
                      <div>
                        <h5 class="uk-text-bold">3. Test and Validate</h5>
                        <div>
                          You validate and test your new Science 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>
                      </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="/learn-in-depth"> Learn more details</a>
                </div>
              </div>
            </div>
        </div>
        <div class="uk-section">
          <div class="uk-container uk-container-large">
            <gif-slider [gifs]="gifs"></gif-slider>
          </div>
        </div>
        <div class="contact-background 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-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
                  <div>
                    <h1>We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
                    <div>Get in touch with our team to find out how.</div>
                    <div class="uk-inline uk-margin-large-top">
                      <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
                    </div>
                  </div>
                  <div class="uk-text-center">
                    <img width="263" height="250" src="../../assets/contact/4.png">
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="questions.length > 0 else comingSoon" 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>
          <ng-template #comingSoon>
              <div 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 uk-text-center uk-text-large">
                  Coming Soon...
                </div>
              </div>
          </ng-template>
      </div>
    `
  })
export class LearnHowComponent {
  public piwiksub: any;
  questions: FAQ[] = [
    /*{
      question: 'Coming soon?',
      answer: 'Yes'
    },
    {
      question: 'Could you be more specific?',
      answer: 'No'
    }*/
  ];
  public gifs: {"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.gifs.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.gifs.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.gifs.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."
    });
  }
}