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

@Component({
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'dks-accounting-lane-header',
  template: `<div></div>
    <ng-container [ngSwitch]="state">
      <div *ngSwitchCase="AccountingState.Billable">Abrechenbar</div>
      <div *ngSwitchCase="AccountingState.PreparedForBilling">
        für Abrechnung vorbereitet
      </div>
      <div *ngSwitchCase="AccountingState.Billed">
        Abgerechnet (mit Abweichung)
      </div>
    </ng-container>
    <dks-accounting-lane-header-filter
      [state]="state"
      (filterChange)="filterChanged($event)"
    ></dks-accounting-lane-header-filter>`,
  styles: [
    `
      :host {
        @apply flex items-center justify-between p-2 bg-gray-50;
      }
    `,
  ],
  imports: [NgSwitch, NgSwitchCase, AccountingLaneHeaderFilterComponent],
})
export class AccountingLaneHeaderComponent {
  @Input() state!: AccountingState;
  @Output() filterChange = new EventEmitter<AccountingFilterArgs>();

  AccountingState = AccountingState;

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