import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';

interface DataItem {
  id: number;
  name: string;
  value: string;
  details?: DataItem[];
}

@Component({
  standalone: true,
  selector: 'app-nested-accordion',
  templateUrl: './nested-accordion.component.html',
  /* styleUrls: ['./nested-accordion.component.css'], */
  imports: [CommonModule, MatExpansionModule, MatTableModule, MatIconModule]
})
export class NestedAccordionComponent {
  displayedColumns: string[] = ['id', 'name', 'value'];
  dataSource: DataItem[] = [
    { id: 1, name: 'Item 1', value: 'Value 1' },
    { id: 2, name: 'Item 2', value: 'Value 2' },
    { id: 3, name: 'Item 3', value: 'Value 3' }
  ];
  
  expandedRow: number | null = null;
  expandedDetails: { [key: number]: DataItem[] } = {};

  getDetails(rowId: number) {
    if (!this.expandedDetails[rowId]) {
      setTimeout(() => { // Simulate lazy loading
        this.expandedDetails[rowId] = [
          { id: rowId * 10 + 1, name: 'Detail 1', value: 'Detail Value 1' },
          { id: rowId * 10 + 2, name: 'Detail 2', value: 'Detail Value 2' }
        ];
      }, 500); // Simulated delay
    }
  }

  toggleRow(row: DataItem) {
    this.expandedRow = this.expandedRow === row.id ? null : row.id;
    if (this.expandedRow !== null) {
      this.getDetails(row.id);
    }
  }
}
