import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AccountingState } from '../../core/data-access/graphql/generated/generated';
import { AccountingInfoCardComponent } from './accounting-info-card/accounting-info-card.component';
import { AccountingLaneComponent } from './accounting-lane/accounting-lane.component';

@Component({
  selector: 'dks-dashboard-accounting',
  imports: [AccountingInfoCardComponent, AccountingLaneComponent],
  template: `<section class="h-full p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="col-span-1 md:col-span-3 flex justify-end items-center">
      <!-- Action Buttons -->
    </div>
    <app-accounting-info-card
      class="self-center"
      [accountingState]="AccountingState.Billable"
    ></app-accounting-info-card>
    <app-accounting-info-card
      class="self-center"
      [accountingState]="AccountingState.PreparedForBilling"
    ></app-accounting-info-card>
    <app-accounting-info-card
      class="self-center"
      [accountingState]="AccountingState.Billed"
    ></app-accounting-info-card>
    <div>
      <dks-accounting-lane
        [accountingState]="AccountingState.Billable"
      ></dks-accounting-lane>
    </div>
    <dks-accounting-lane
      [accountingState]="AccountingState.PreparedForBilling"
    ></dks-accounting-lane>
    <dks-accounting-lane
      [accountingState]="AccountingState.Billed"
    ></dks-accounting-lane>
  </section>`,
  styles: [
    `
      :host {
        display: block;
        height: calc(100% - 64px);
      }
      section {
        grid-template-rows: 2rem auto 1fr;
        /* grid-template-rows: 2rem 1fr; */
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardAccountingComponent {
  AccountingState = AccountingState;
}
