import { Injectable } from '@angular/core';
import introJs from 'intro.js';

@Injectable({
  providedIn: 'root'
})
export class IntroService {
  private intro = introJs();

  constructor() {}

  startIntro() {
    this.intro.setOptions({
      steps: [
        {
          intro: 'Welcome to the web let me show you around!'
        },
        {
          element: '#timeline',
          intro: 'This is the logo of Memory Map.'
        },
        {
          element: '#quete',
          intro: 'Click here to open the search bar on mobile.'
        },
        {
          element: '#add',
          intro: 'This button toggles the mobile navigation menu.'
        },
        {
          element: '#friend',
          intro: 'Here is the main navigation menu.'
        },
      ],
      exitOnOverlayClick: false,
      disableInteraction: false,
    });

    this.intro.start();
  }
}