import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

export type AnnualMonthValue = {
  month: number;
  label: string;
  value: number | null;
};

export type AnnualRow = {
  cliente: string;
  linha: string;
  item: string;
  total: number;
  parcelasLabel: string;
  months: AnnualMonthValue[];
};

@Component({
  selector: 'app-parcelamento-detalhamento-anual-modal',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './parcelamento-detalhamento-anual-modal.html',
  styleUrls: ['./parcelamento-detalhamento-anual-modal.scss'],
})
export class ParcelamentoDetalhamentoAnualModalComponent {
  @Input() open = false;
  @Input() years: number[] = [];
  @Input() selectedYear: number | null = null;
  @Input() data: AnnualRow | null = null;

  @Output() close = new EventEmitter<void>();
  @Output() yearChange = new EventEmitter<number>();

  onYearChange(value: unknown): void {
    const year = Number(value);
    if (!Number.isFinite(year)) return;
    this.yearChange.emit(year);
  }
}