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="about-background uk-section-large 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">
                  <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-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 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>
                        <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 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>
                      </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 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>
                      </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">
                        <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 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>
                      </div>
                      <div class="uk-hidden@m">
                        <h5 class=" uk-text-bold">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>
                      </div>
                      <div>
                        <h5 class="uk-text-bold">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>
                      </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 class="cloud-abstract 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 class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
            <div class="uk-container uk-section">
                <div class="uk-flex uk-flex-middle" uk-grid>
                  <div class="uk-width-expand">
                    <h1 class="uk-text-bold">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-medium-top">
                      <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/contact/3.png">
                  </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>
        <!--<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/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/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/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/about/gifs/links.gif",
      header: "Links",
      text: " Manage user claims related to the research community."
    });
    this.gifs.push({
      gif: "../../../../assets/about/gifs/help.gif",
      header: " Help texts",
      text: "Add or edit help text in research community pages."
    });
    this.gifs.push({
      gif: "../../../../assets/about/gifs/users.gif",
      header: "Users",
      text: "Invite more users to subscribe, manage community subscribers, your personal info and notification settings."
    });
  }
}