
import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output,
} from '@angular/core';
import {
  AccountingFilterArgs,
  AccountingState,
} from '../../../core/data-access/graphql/generated/generated';
import { AccountingLaneHeaderFilterComponent } from './accounting-lane-header-filter.component';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'dks-accounting-lane-header',
  template: `<div></div>
@switch (state) {
  @case (AccountingState.Billable) {
    <div>Abrechenbar</div>
  }
  @case (AccountingState.PreparedForBilling) {
    <div>
      für Abrechnung vorbereitet
    </div>
  }
  @case (AccountingState.Billed) {
    <div>
      Abgerechnet (mit Abweichung)
    </div>
  }
}
<dks-accounting-lane-header-filter
  [state]="state"
  (filterChange)="filterChanged($event)"
></dks-accounting-lane-header-filter>`,
  host: {
    class: 'flex items-center justify-between p-2 bg-secondary-container',
  },
  styles: [
    `
      :host {
        background-color: var(--mat-sys-secondary-container);
      }
    `,
  ],
  imports: [AccountingLaneHeaderFilterComponent],
})
export class AccountingLaneHeaderComponent {
  @Input() state!: AccountingState;
  @Output() filterChange = new EventEmitter<AccountingFilterArgs>();

  AccountingState = AccountingState;

  filterChanged(filter: AccountingFilterArgs) {
    this.filterChange.emit(filter);
  }
}
