import {
  AfterContentInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ContentChildren,
  input,
  NgModule,
  QueryList,
  signal,
} from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatTooltipModule } from '@angular/material/tooltip';
import { GaugeChartComponent } from '../charts/gauge-chart/gauge-chart.component';
import { UtilNgxEchartsModule } from '../ngx-echarts/util-ngx-echarts.module';
import { MatDividerModule } from '@angular/material/divider';

@Component({
  standalone: false,
  selector: 'app-info-card-footer',
  template: `<div class="text-md font-bold">{{ value() }}</div>
    <div class="text-xs font-light text-center">{{ label() }}</div>`,
  host: { class: 'flex flex-col items-center' },
})
export class InfoCardFooterValueGroup {
  value = input.required();
  label = input();
}

@Component({
  standalone: false,
  selector: 'app-info-card-content',
  template: ` <div
      class="p-4 pb-0 text-sm font-light text-center"
      style="color: var(--mat-sys-on-surface-variant)"
    >
      {{ label() }}
    </div>
    <div
      class="p-4 pt-0 text-center text-lg font-bold"
      style="color: var(--mat-sys-primary)"
    >
      {{ value() }}
    </div>`,
  host: { class: 'flex flex-col' },
})
export class InfoCardContentValueGroup {
  value = input.required();
  label = input();
}

@Component({
  standalone: false,
  selector: 'app-info-card',
  templateUrl: './info-card.component.html',
  styleUrl: './info-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InfoCardComponent implements AfterContentInit {
  @ContentChildren(InfoCardFooterValueGroup)
  projectedFooterItems!: QueryList<InfoCardFooterValueGroup>;
  hasFooterContent = signal(false);

  @ContentChildren(InfoCardContentValueGroup)
  projectedMainContentItems!: QueryList<InfoCardContentValueGroup>;
  hasMainContentContent = signal(false);

  chartValue = input<number>();
  chartLabel = input<string>();
  title = input<string>();
  subtitle = input<string>();

  constructor(private readonly cdr: ChangeDetectorRef) {}

  ngAfterContentInit() {
    this.hasFooterContent.set(this.projectedFooterItems.length > 0);
    this.hasMainContentContent.set(this.projectedMainContentItems.length > 0);
    this.cdr.detectChanges();
    this.projectedFooterItems.changes.subscribe(() => {
      this.hasFooterContent.set(this.projectedFooterItems.length > 0);
    });
    this.projectedMainContentItems.changes.subscribe(() => {
      this.hasMainContentContent.set(this.projectedMainContentItems.length > 0);
    });
  }
}

@NgModule({
  imports: [
    MatCardModule,
    MatDividerModule,
    MatTooltipModule,
    UtilNgxEchartsModule,
    GaugeChartComponent,
  ],
  declarations: [
    InfoCardComponent,
    InfoCardContentValueGroup,
    InfoCardFooterValueGroup,
  ],
  exports: [
    InfoCardComponent,
    InfoCardContentValueGroup,
    InfoCardFooterValueGroup,
  ],
})
export class InfoCardModule {}
