import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { IconName } from 'src/app/shared/components/icon/icon.component';
import { ApiFitService } from 'src/app/shared/services/api-fit/api-fit.service';

interface Differential {
  icon: IconName;
  label: string;
  text: string;
}

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.scss'],
})
export class LandingPageComponent {
  applicationData = [
    {
      quantity: '',
      description: 'Receitas saudáveis',
    },
    {
      quantity: `+${(1000).toLocaleString('pt-Br', {
        notation: 'compact',
      })}`,
      description: 'Exercícios físicos',
    },
    {
      quantity: `+${(4000).toLocaleString('pt-Br', {
        notation: 'compact',
      })}`,
      description: 'Usuários ativos',
    },
  ];

  differentials: Differential[] = [
    {
      icon: 'serving',
      label: 'Planejamento de refeições',
      text: 'Crie refeições e veja os nutrientes que consome',
    },
    {
      icon: 'gym',
      label: 'Treinos customizados',
      text: 'Faça seus próprios treinos com os exercícios desejados',
    },
    {
      icon: 'nutrients',
      label: 'Receitas exclusivas',
      text: 'Visualize e compartilhe suas receitas com outros usuários',
    },
  ];

  constructor(
    private router: Router,
    private apiFitService: ApiFitService
  ) {}

  ngOnInit() {
    this.fetchRecipesCount();
    this.fetchUsersCount();
  }

  formatQuantity(quantity: number): string {
    const multipleOf = 10;
    const roundedNumber = Math.floor(quantity / multipleOf) * multipleOf;

    return roundedNumber.toLocaleString('pt-Br', {
      notation: 'compact',
    });
  }

  fetchRecipesCount() {
    this.apiFitService.getRecipesCount()
    .subscribe({
      next: res => this.applicationData[0].quantity = `+${this.formatQuantity(res.data)}`
    });
  }

  fetchUsersCount() {
    this.apiFitService.getUsersCount()
    .subscribe({
      next: res => this.applicationData[2].quantity = `+${this.formatQuantity(res.data)}`
    });
  }

  redirectToSignup() {
    this.router.navigate(['/app/auth/signup']);
  }
}
