front/src/app/services/intro/intro.service.ts

import { Injectable } from '@angular/core';
import introJs from 'intro.js';
import { ModalService } from '../modal/modal.service';
import { NavbarService } from '../navbar/navbar.service';

@Injectable({
  providedIn: 'root'
})
export class IntroService {
  constructor(
    private modalService: ModalService,
    private navbarService: NavbarService
  ) {}

  private sleep(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async startIntro() {
    await new Promise<void>((resolve) => {
      const intro = introJs();
      intro.setOptions({
        tooltipClass: 'custom-tooltip-with-avatar',
        steps: [
          { intro: 'Bienvenue sur MemoryMap ! ' },
          { intro: 'Ensemble nous allons explorer les différentes fonctionnalités disponibles !'},
        ],
        exitOnOverlayClick: false,
        disableInteraction: false,
      });
      intro.oncomplete(() => {
        resolve();
      });

      intro.start();
    });
    await this.sleep(300);

    await new Promise<void>((resolve) => {
      const intro = introJs();
      intro.setOptions({
        tooltipClass: 'custom-tooltip-with-avatar',
        steps: [
          { element: '#timeline', intro: 'Ici retrouvez tous vos souvenirs grâce à une frise chronologique de vos voyages!' },
          { element: '#quete', intro: "N'hésitez pas à réaliser les différentes quêtes, pour un petit plaisir personnel, que vous pourrez retrouver ici !" },
        ],
        exitOnOverlayClick: false,
        disableInteraction: true,
      });

      intro.onstart(async () => {
        this.navbarService.onpenNavbar();
        await this.sleep(100);
      });

      intro.oncomplete(() => {
        resolve();
      });

      intro.start();
    });
    await this.sleep(300);

    await new Promise<void>((resolve) => {
      const intro = introJs();

      intro.setOptions({
        tooltipClass: 'introjs-tooltip custom-tooltip-with-avatar',
        steps: [
          { element: '#add', intro: "Le point important : l'ajout de pin ! <br>Allons voir ensemble comment cela fonctionne." },
          { element: '#add-pin-modal-title', intro: 'Ajoutez le titre de votre pin, le lieu du pin par exemple !' },
          { element: '#add-pin-modal-image', intro: 'Glissez et déposez toutes les images que vous souhaitez ! <br> <br>TIP : La localisation de la première image sera récupérée automatiquement 😎' },
          { element: '#add-pin-modal-localisation', intro: "Si l'adresse n'a pas été récupérée automatiquement, vous pouvez la renseigner manuellement." },
          { element: '#add-pin-modal-description', intro: 'Une petite description de votre voyage pour vous souvenir des points importants !' },
          { element: '#add-pin-modal-date', intro: 'Ajoutez la date de votre voyage, très important pour la frise chronologique !' },
          { element: '#add-pin-modal-validate', intro: "Et voilà vous n'avez plus qu'à valider et ajouter votre pin !" },
        ],
        exitOnOverlayClick: false,
        disableInteraction: true
      });

      intro.onchange(async (element) => {
        if (element?.id === 'add-pin-modal-title') {
          this.modalService.openModal('add-pin-modal');
          await this.sleep(300);
        }
      });

      intro.onexit(() => {
        this.modalService.closeModal('add-pin-modal');
        resolve();
      });

      intro.oncomplete(() => {
        this.modalService.closeModal('add-pin-modal');
        resolve();
      });

      intro.start();
    });

    await this.sleep(300);

    await new Promise<void>((resolve) => {
      const intro = introJs();
      intro.setOptions({
        tooltipClass: 'custom-tooltip-with-avatar',
        steps: [
          { element: '#friend', intro: "Memory Map, c'est aussi du social. Voyons voir comment ajouter un ami !" },
          { element: '#friend-search-bar', intro: "Cherchez votre ami avec son pseudo afin de lui envoyer une demande d'ami !" },
          { element: '#friend-list', intro: "Ici vous retrouverez vos amis, ainsi que vos demandes d'amis, acceptez ou refusez les demandes en attente." }
        ],
        exitOnOverlayClick: false,
        disableInteraction: true,
      });

      intro.onchange(async (element) => {
        if (element?.id === 'friend-search-bar') {
          this.modalService.openModal('friend-modal');
          await this.sleep(300);
        }
      });

      intro.onexit(() => {
        this.modalService.closeModal('friend-modal');
        resolve();
      });

      intro.oncomplete(() => {
        this.modalService.closeModal('friend-modal');
        this.navbarService.closeNavbar();
        resolve();
      });

      intro.start();
    });
  }
}