// src/app/classroom-view/classroom-view.component.ts

import { Component, Input, OnInit } from '@angular/core';

interface GroupedClients {
  organizationalUnitName: string;
  clientRows: any[][];
}

@Component({
  selector: 'app-classroom-view',
  templateUrl: './classroom-view.component.html',
  styleUrls: ['./classroom-view.component.css']
})
export class ClassroomViewComponent implements OnInit {  
  @Input() clients: any[] = [];
  @Input() pcInTable: number = 3;
  groupedClients: GroupedClients[] = [];

  constructor() {}

  ngOnInit(): void {
    this.groupClientsByOrganizationalUnit();
  }

  ngOnChanges(): void {
    this.groupClientsByOrganizationalUnit(); 
  }

  groupClientsByOrganizationalUnit(): void {
    const grouped = this.clients.reduce((acc, client) => {
      const ouName = client.organizationalUnit.name;
      if (!acc[ouName]) {
        acc[ouName] = [];
      }
      acc[ouName].push(client);
      return acc;
    }, {});

    this.groupedClients = Object.keys(grouped).map(ouName => ({
      organizationalUnitName: ouName,
      clientRows: this.chunkArray(grouped[ouName], this.pcInTable)
    }));
  }

  chunkArray(arr: any[], chunkSize: number): any[][] {
    const chunks = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
      chunks.push(arr.slice(i, i + chunkSize));
    }
    return chunks;
  }

  handleClientClick(client: any): void {
    console.log('Client clicked:', client);
  }
}