import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-chart-login',
  standalone: true,
  imports: [],
  templateUrl: './login.chart.component.html',
  styleUrl: './login.chart.component.scss'
})
export class LoginChartComponent {
  chart: any = [];
  private http: HttpClient = inject(HttpClient);

  constructor() {}

  ngOnInit() {
    


    this.getData();
    
  }

  private getData() {
    this.http.get<Login[]>('api/app/user/logins').subscribe(res => {
      console.log(res)
      this.createChart(res);
    })
  }

  private createChart(data: Login[] ) {

    
    this.chart = new Chart('canvas', {
      type: 'bar',
      data: {
        labels: data.map(d => new Date(d.date).toLocaleDateString('de-DE', {dateStyle: 'short'})),
        datasets: [
          {
            label: 'Logins',
            data: data.map(d => d.count.logins),
            borderWidth: 1,
          },{
            label: 'Applogins',
            data: data.map(d => d.count.systemLogins),
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
          x: {
            stacked: true,
          }
        },
      },
    });
  }
}

interface Login {
  date: string;
  count: { logins: number, systemLogins: number }
}