import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { Router } from "@angular/router";
import { ActivatedRoute } from "@angular/router";
import { InitialService } from "../../services/initial.service";

export interface Slide {
  title: string;
  description: string;
  image: string;
}

@Component({
  selector: "page-tutorial",
  templateUrl: "tutorial.html",
  styleUrls: ["./tutorial.scss"],
})
export class TutorialPage implements OnInit {
  slides: Slide[];
  showSkip = true;
  pageOrigin: any;
  statusPageSettings: boolean = false;
  slideOpts: any = {
    slidesPerView: "auto",
  };
  constructor(
    public translate: TranslateService,
    private router: Router,
    public route: ActivatedRoute,
    public initialService: InitialService
  ) {
  }

  ngOnInit() {
    this.loadSlides();
  }

  // Muestra el modal donde el usuario selecciona la ciudad de origen
  cityConectionModal() {
    if (!this.statusPageSettings) {
      this.router.navigate(["/city-connection"]);
    } else {
      this.router.navigate(["/app/tabs/settings"]);
    }
  }

  onSlideChangeStart(event) {
    event.target.isEnd().then((isEnd) => {
      this.showSkip = !isEnd;
    });
  }

  ionViewDidEnter() {
    this.pageOrigin = this.route.snapshot.paramMap.get("origin");
    if (this.pageOrigin && this.pageOrigin == "settings") {
      this.statusPageSettings = true;
    } else {
      this.statusPageSettings = false;
    }
  }

  loadSlides() {
    if (this.initialService._parametersMain && this.initialService._parametersMain.slides && this.initialService._parametersMain.slides.length)
      this.slides = this.initialService._parametersMain.slides;
    else
      this.slides = [
        {
          title: this.translate.instant("TUTORIAL_SLIDE1_TITLE"),
          description: this.translate.instant("TUTORIAL_SLIDE1_DESCRIPTION"),
          image: "assets/img/ica-slidebox-img-1.png",
        },
        {
          title: this.translate.instant("TUTORIAL_SLIDE2_TITLE"),
          description: this.translate.instant("TUTORIAL_SLIDE2_DESCRIPTION"),
          image: "assets/img/ica-slidebox-img-2.png",
        },
        {
          title: this.translate.instant("TUTORIAL_SLIDE3_TITLE"),
          description: this.translate.instant("TUTORIAL_SLIDE3_DESCRIPTION"),
          image: "assets/img/ica-slidebox-img-3.png",
        },
        {
          title: this.translate.instant("TUTORIAL_SLIDE4_TITLE"),
          description: this.translate.instant("TUTORIAL_SLIDE4_DESCRIPTION"),
          image: "assets/img/ica-slidebox-img-4.png",
        }
      ];
  }
}