import { CurrencyPipe, NgClass, NgStyle } from '@angular/common';
import { Component, effect, input, signal } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { tap } from 'rxjs';
import {
  GetTourCostBreakdownGQL,
  GetTourCostBreakdownQuery,
  Tour,
} from '../../../core/data-access/graphql/generated/generated';

@Component({
  selector: 'app-accounting-tour-cost-breakdown',
  imports: [MatDividerModule, CurrencyPipe, NgClass],
  template: `
    @if (costBreakdown() !== undefined) {
    <div class="px-4 py-2 flex justify-between">
      <div class="flex flex-col text-gray-600 text-sm">
        <span class="font-medium">Tarif</span>
        <span>
          {{ costBreakdown()?.tariffDescription }}
        </span>
      </div>
      <div class="flex flex-col text-gray-600 text-sm">
        <span class="font-medium">Gültigkeitszeitraum</span>
        <span>
          {{ costBreakdown()?.tariffValidityPeriod }}
        </span>
      </div>
    </div>
    <mat-divider></mat-divider>
    <div class="px-4 py-2 grid *:py-1">
      <div
        class="w-full justify-self-start"
        style="background-color: var(--mat-sys-secondary-container)"
      >
        Beschreibung
      </div>
      <!-- <div
        class="w-full justify-self-center"
        style="background-color: var(--mat-sys-secondary-container)"
      >
        Typ
      </div> -->
      <div
        class="w-full justify-self-end"
        style="background-color: var(--mat-sys-secondary-container)"
      >
        Wert
      </div>
      <div
        class="w-full justify-self-end"
        style="background-color: var(--mat-sys-secondary-container)"
      >
        Summe
      </div>
      @for (servicePosition of costBreakdown()?.servicePositions; track $index;
      let o = $odd) {
      <div class="w-full" [ngClass]="{ 'bg-gray-100': o }">
        {{ servicePosition.description }}
      </div>
      <!-- <div class="justify-self-center w-full break-all" [ngClass]="{ 'bg-gray-100': o }">
        {{ servicePosition.variant }}
      </div> -->
      <div class="justify-self-end w-full" [ngClass]="{ 'bg-gray-100': o }">
        {{
          servicePosition.value / 100
            | currency : 'EUR' : 'symbol' : '.2' : 'de'
        }}
      </div>
      <div class="justify-self-end w-full" [ngClass]="{ 'bg-gray-100': o }">
        {{
          sumServicePositionToIndex(costBreakdown()?.servicePositions, $index) /
            100 | currency : 'EUR' : 'symbol' : '.2' : 'de'
        }}
      </div>
      }
    </div>
    }
  `,
  styles: `.grid {grid-template-columns: 3fr 1fr 1fr;}`,
})
export class AccountingTourCostBreakdownComponent {
  tour = input.required<Tour>();
  costBreakdown = signal<
    GetTourCostBreakdownQuery['tourCostBreakdown'] | undefined
  >(undefined);

  constructor(private readonly tourCostBreakdownGql: GetTourCostBreakdownGQL) {
    effect(() => {
      tourCostBreakdownGql
        .fetch({ operationId: this.tour().operationId })
        .pipe(tap((res) => this.costBreakdown.set(res.data.tourCostBreakdown)))
        .subscribe();
    });
  }

  sumServicePositionToIndex(
    servicePositions: any[] | undefined,
    idx: number
  ): number {
    console.log(servicePositions, idx);
    return (servicePositions ?? [])
      .slice(0, idx + 1)
      .reduce((sum, { value }) => (sum += value), 0);
  }
}
