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

@Component({
  selector: 'app-touch-pad-menu',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './touch-pad-menu.component.html',
  styleUrls: ['./touch-pad-menu.component.css']
})
export class TouchPadMenuComponent implements OnInit {
  labels: string[] = [
    'WIN', 'SHP', 'THP',
    'PLC', 'SHW', 'FOR',
    'QUI', 'TAN', 'EXA',
    'WSP', 'TRE', 'MJP',
    'JKP', 'SJP', '.'
  ];

  numbers: number[] = Array.from({ length: 30 }, (_, i) => i + 1);
  calcKeys: string[] = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '←', 'CLR'];

  labelRowsFlat: string[] = [];
  numbersFlat: number[] = [];

  ngOnInit() {
    this.labelRowsFlat = this.labelRows.flat();
    this.numbersFlat = this.numberRows.flat();
  }

  get labelRows() {
    return this.chunk(this.labels, 3);
  }

  get numberRows() {
    return this.chunk(this.numbers, 6);
  }

  get calcKeyRows() {
    return this.chunk(this.calcKeys, 3);
  }

  private chunk<T>(array: T[], size: number): T[][] {
    return Array.from({ length: Math.ceil(array.length / size) }, (_, i) =>
      array.slice(i * size, i * size + size)
    );
  }
}
