import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DashboardStats, DonutChartConfig, DOSSIER_TEMPLATE_ID } from '@red/domain';
import { Observable } from 'rxjs';
import { TranslateChartService } from '@services/translate-chart.service';
import { map } from 'rxjs/operators';
import { DashboardStatsService } from '@services/dossier-templates/dashboard-stats.service';
import { getParam } from '@iqser/common-ui/lib/utils';

@Component({
    selector: 'redaction-dossiers-listing-details',
    templateUrl: './dossiers-listing-details.component.html',
    styleUrls: ['./dossiers-listing-details.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DossiersListingDetailsComponent {
    readonly stats$: Observable<DashboardStats>;
    readonly documentsChartConfig$: Observable<DonutChartConfig[]>;
    readonly dossiersChartConfig$: Observable<DonutChartConfig[]>;

    constructor(dashboardStatsService: DashboardStatsService, private readonly _translateChartService: TranslateChartService) {
        const dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
        this.stats$ = dashboardStatsService.getEntityChanged$(dossierTemplateId);

        this.dossiersChartConfig$ = this.stats$.pipe(
            map(stats => stats.dossiersChartConfig),
            map(data => _translateChartService.translateDossierStates(data, dossierTemplateId)),
        );
        this.documentsChartConfig$ = this.stats$.pipe(
            map(stats => stats.documentsChartConfig),
            map(data => _translateChartService.translateWorkflowStatus(data)),
        );
    }
}
