import {type AfterViewInit, Component} from '@angular/core';
import {ShepherdService} from 'angular-shepherd';
import {MainButton} from '../buttons/main-button/main-button';
import {Store} from '@ngrx/store';
import {ActionTypes, StateInterface} from '../reducers';
import {TranslationService} from '../services/translation.service';

@Component({
  selector: 'app-tuto-tour',
  imports: [
    MainButton
  ],
  templateUrl: './tuto-tour.html',
  styleUrl: './tuto-tour.scss'
})
export class TutoTour implements AfterViewInit {

  // étapes de tour d'introduction
  // bouton pour créer une nouvelle conversation
  // input pour envoyer un message

  private firstStepButtons: any = [
    {
      classes: 'shepherd-button-secondary',
      text: 'Sortie', // Will be updated in startTour
      type: 'cancel'
    },
    {
      classes: 'shepherd-button-primary',
      text: 'Suivant', // Will be updated in startTour
      type: 'next'
    }
  ]
  private mainButtons: any = [
    {
      classes: 'shepherd-button-secondary',
      text: 'Sortie', // Will be updated in startTour
      type: 'cancel'
    },
    {
      classes: 'shepherd-button-primary',
      text: 'Précédent', // Will be updated in startTour
      type: 'back'
    },
    {
      classes: 'shepherd-button-primary',
      text: 'Suivant', // Will be updated in startTour
      type: 'next'
    }
  ]

  private defaultSteps: any = [{
    id: 'intro',
    attachTo: {
      element: '#newChatBar .new-button',
      on: 'bottom'
    },
    beforeShowPromise: function () {
      return new Promise(function (resolve: any) {
        setTimeout(function () {
          window.scrollTo(0, 0);
          resolve();
        }, 500);
      });
    },
    buttons: this.firstStepButtons,
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-targeted-element-custom',
    highlightClass: 'highlight',
    scrollTo: true,
    title: 'Démo de votre chatbot', // Will be updated in startTour
    text: ['Voyons ensemble comment fonctionne notre chatbot. Ici vous pouvez démarrer une nouvelle conversation.'], // Will be updated in startTour
  },
    {
      id: 'step2',
      attachTo: {
        element: '.prompt-input',
        on: 'top'
      },
      scrollTo: true,
      buttons: this.mainButtons,
      title: 'Poser une question', // Will be updated in startTour
      text: ['Écrivez votre question ici, vous pouvez aussi envoyer un document'], // Will be updated in startTour
    }
  ]

  constructor(
    private shepherdService: ShepherdService,
    private store: Store<StateInterface>,
    private translationService: TranslationService
  ) {
    addEventListener('complete', () => {
      this.completeTour();
    })
  }

  /**
   * Translates a key using the translation service
   * @param key The key to translate
   * @param defaultValue Optional default value if translation is not found
   * @returns The translated string
   */
  translate(key: string, defaultValue?: string): string {
    return this.translationService.translate(key, defaultValue);
  }


  ngAfterViewInit() {
    // Only start the tour if displayTour is true in the store
    this.store.select(state => state.app.displayTour).subscribe(displayTour => {
      if (displayTour) {
        this.startTour();
      }
    });
  }

  startTour() {
    // Apply translations to buttons
    this.firstStepButtons[0].text = this.translate('tuto.button.exit', 'Sortie');
    this.firstStepButtons[1].text = this.translate('tuto.button.next', 'Suivant');

    this.mainButtons[0].text = this.translate('tuto.button.exit', 'Sortie');
    this.mainButtons[1].text = this.translate('tuto.button.back', 'Précédent');
    this.mainButtons[2].text = this.translate('tuto.button.next', 'Suivant');

    // Apply translations to step content
    this.defaultSteps[0].title = this.translate('tuto.step1.title', 'Démo de votre chatbot');
    this.defaultSteps[0].text = [this.translate('tuto.step1.text', 'Voyons ensemble comment fonctionne notre chatbot. Ici vous pouvez démarrer une nouvelle conversation.')];

    this.defaultSteps[1].title = this.translate('tuto.step2.title', 'Poser une question');
    this.defaultSteps[1].text = [this.translate('tuto.step2.text', 'Écrivez votre question ici, vous pouvez aussi envoyer un document')];

    // Configure and start the tour
    this.shepherdService.defaultStepOptions = {
      classes: 'shepherd-theme-custom'
    };
    this.shepherdService.modal = true;
    this.shepherdService.confirmCancel = false;
    this.shepherdService.addSteps(this.defaultSteps);
    this.shepherdService.start();
  }

  completeTour() {
    console.log("tour has ended");

    // Dispatch action to set displayTour to false
    this.store.dispatch({
      type: ActionTypes.UPDATE_APP,
      payload: {
        displayTour: false
      }
    });
  }
}
