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

//Third-party-module
import { AngularSvgIconModule } from 'angular-svg-icon';

//animation
import { accordionAnimation } from '../../animations/accordion-animation';

//svg-routes
import { SvgRoutes } from '../../utils/svg-routes/payroll-list-summary-svg-routes';

//model
import { PayrollListSummaryOverview } from '../../models/payroll-list-summary.model';

@Component({
    selector: 'app-ca-payroll-list-summary-overview',
    templateUrl: './ca-payroll-list-summary-overview.component.html',
    styleUrls: ['./ca-payroll-list-summary-overview.component.scss'],
    imports: [
        //Modules
        CommonModule,
        AngularSvgIconModule,
    ],
    animations: [accordionAnimation('showHideCardBody')],
    encapsulation: ViewEncapsulation.None
})
export class CaPayrollListSummaryOverviewComponent {
  @Input() leftTemplate!: TemplateRef<any>;
  @Input() showLeftTemplate: boolean = false;
  @Input() item!: PayrollListSummaryOverview;
  public isItemExpanded: boolean = true;

  @Input() isExpanded: boolean = false;
  @Input() index: number = -1;

  @Output() toggle: EventEmitter<{
    payrollSummary: PayrollListSummaryOverview;
    status: boolean;
    index: number;
  }> = new EventEmitter<{
    payrollSummary: PayrollListSummaryOverview;
    status: boolean;
    index: number;
  }>();
  @Input() animationMarginParams = {
    marginTop: '12px',
    marginBottom: '12px',
  };
  constructor() {}

  public getSvgPath(propertyName: keyof typeof SvgRoutes): string {
    return SvgRoutes[propertyName] as string;
  }

  public toggleAccordion(): void {
    this.toggle.emit({
      payrollSummary: this.item,
      status: !this.isExpanded,
      index: this.index,
    });
  }
}