import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { DialogRef } from '@ngneat/dialog';
import {
  Ticket,
  Tour,
} from '../../../core/data-access/graphql/generated/generated';
import { AccountingTourOverviewComponent } from './accounting-tour-overview.component';
import { AccountingTourTicketComponent } from './accounting-tour-ticket.component';
import { AccountingTourCostBreakdownComponent } from './accounting-tour-cost-breakdown.component';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'dks-accounting-tour-view',
  template: `<h3 class="py-2 px-3 !mb-0">
      {{ ref.data.ordinanceType }} -
      {{ ref.data.patientName }}
      {{ ref.data.patientSurname }}
    </h3>
    <hr />
    <mat-tab-group>
      <mat-tab label="Umsatzberechnung">
        <app-accounting-tour-cost-breakdown
          [tour]="ref.data"
        ></app-accounting-tour-cost-breakdown>
      </mat-tab>
      <mat-tab label="Übersicht">
        <dks-accounting-tour-overview
          [tour]="ref.data"
        ></dks-accounting-tour-overview>
      </mat-tab>
      <mat-tab label="Ticket">
        <dks-accounting-tour-ticket
          [tour]="ref.data"
        ></dks-accounting-tour-ticket>
      </mat-tab>
    </mat-tab-group> `,
  styles: [],
  imports: [
    MatTabsModule,
    MatIconModule,
    AccountingTourOverviewComponent,
    AccountingTourTicketComponent,
    AccountingTourCostBreakdownComponent
  ],
})
export class AccountingTourViewComponent {
  ref =
    inject<DialogRef<Tour & { ticket: Ticket }, undefined | any>>(DialogRef);
}
