import { ClipboardModule } from '@angular/cdk/clipboard';
import { CurrencyPipe, NgClass } from '@angular/common';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  HostBinding,
  Input,
  inject,
} from '@angular/core';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { HotToastService } from '@ngxpert/hot-toast';
import {
  AccountingState,
  Ticket,
  TicketValidationState,
  Tour,
} from '../../../core/data-access/graphql/generated/generated';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'dks-accounting-item',
  template: ` <div class="flex justify-between">
        <div class="flex items-center">
          <button
            mat-icon-button
            (click)="notifyCopy($event)"
            [cdkCopyToClipboard]="tour.operationId"
            >
            <mat-icon class="text-sm">content_copy</mat-icon>
          </button>
          {{ tour.operationId }}
        </div>
        <span>{{ tour.ordinanceType }}</span>
      </div>
      <div>
        @if (accountingState !== AccountingState.Billed) {
          <span
            [title]="!tour.healthInsurance ? 'Keine Krankenkasse hinterlegt' : ''"
            [ngClass]="{ 'bg-yellow-200': !tour.healthInsurance }"
            >
            {{ tour.revenue | currency : 'EUR' : 'symbol' : '1.2-2' : 'de-DE' }}
          </span>
        } @else {
          {{
          tour.revenueDeviation | currency : 'EUR' : 'symbol' : '1.2-2' : 'de-DE'
          }}
        }
      </div>
      `,
  host: {
    class: 'flex flex-col rounded border p-2 m-1 bg-white cursor-pointer',
  },
  styles: [
    `
      @use '@angular/material' as mat;
      :host {
        @include mat.icon-button-overrides(
          (
            icon-size: 14,
          )
        );
      }
    `,
  ],
  imports: [
    MatButtonModule,
    MatIconModule,
    MatBadgeModule,
    ClipboardModule,
    NgClass,
    CurrencyPipe
],
})
export class AccountingItemComponent implements AfterViewInit {
  toast = inject(HotToastService);

  @Input() tour!: Tour & { ticket: Ticket };
  @Input() accountingState!: AccountingState;

  @HostBinding('style.border-color')
  borderColor = '#ffffff';

  AccountingState = AccountingState;

  ngAfterViewInit(): void {
    if (
      this.tour.ticket.currentState !== TicketValidationState.Archived &&
      (this.accountingState === AccountingState.Billable ||
        this.accountingState === AccountingState.PreparedForBilling)
    ) {
      this.borderColor = '#dc2626';
    }
  }

  notifyCopy(event: Event) {
    event.stopPropagation();
    this.toast.success('Einsatznummer kopiert!', {
      duration: 2000,
      id: 'operationId-copy',
    });
  }
}
