casino/frontend/src/app/feature/landing/landing.component.ts

import {
  ChangeDetectionStrategy,
  Component,
  inject,
  OnDestroy,
  OnInit,
  signal,
} from '@angular/core';
import { NgFor } from '@angular/common';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { AuthService } from '@service/auth.service';
import { LoginComponent } from '../auth/login/login.component';
import { RegisterComponent } from '../auth/register/register.component';
import '../auth/recover-password/recover-password.component';
import RecoverPasswordComponent from '../auth/recover-password/recover-password.component';

@Component({
  selector: 'app-landing-page',
  standalone: true,
  imports: [NgFor, RouterLink, LoginComponent, RegisterComponent, RecoverPasswordComponent],
  templateUrl: './landing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LandingComponent implements OnInit, OnDestroy {
  currentSlide = 0;
  private autoplayInterval: ReturnType<typeof setInterval> | undefined;
  authService: AuthService = inject(AuthService);
  route: ActivatedRoute = inject(ActivatedRoute);
  showLogin = signal(false);
  showRegister = signal(false);
  showRecoverPassword = signal(false);

  ngOnInit() {
    this.startAutoplay();
    document.body.style.overflow = 'auto';
    if (this.route.snapshot.queryParamMap.get('login') === 'true') {
      this.showLoginForm();
    }
  }

  ngOnDestroy() {
    this.stopAutoplay();
    document.body.style.overflow = 'auto';
  }

  showLoginForm() {
    this.showLogin.set(true);
    this.showRegister.set(false);
    this.showRecoverPassword.set(false);
    document.body.style.overflow = 'hidden';
  }

  showRegisterForm() {
    this.showRegister.set(true);
    this.showLogin.set(false);
    this.showRecoverPassword.set(false);
    document.body.style.overflow = 'hidden';
  }

  showRecoverPasswordForm() {
    this.showRecoverPassword.set(true);
    this.showLogin.set(false);
    this.showRegister.set(false);
    document.body.style.overflow = 'hidden';
  }

  hideAuthForms() {
    this.showLogin.set(false);
    this.showRegister.set(false);
    this.showRecoverPassword.set(false);
    document.body.style.overflow = 'auto';
  }

  prevSlide() {
    this.currentSlide = this.currentSlide === 0 ? 1 : 0;
    this.resetAutoplay();
  }

  nextSlide() {
    this.currentSlide = this.currentSlide === 1 ? 0 : 1;
    this.resetAutoplay();
  }

  goToSlide(index: number) {
    this.currentSlide = index;
    this.resetAutoplay();
  }

  private startAutoplay() {
    this.autoplayInterval = setInterval(() => {
      this.nextSlide();
    }, 5000);
  }

  private stopAutoplay() {
    if (this.autoplayInterval) {
      clearInterval(this.autoplayInterval);
    }
  }

  private resetAutoplay() {
    this.stopAutoplay();
    this.startAutoplay();
  }
}