import { Component, OnDestroy, OnInit } from '@angular/core';
import {
    defaultDialogConfig,
    IconButtonTypes,
    ListingComponent,
    listingProvidersFactory,
    LoadingService,
    TableColumnConfig,
} from '@iqser/common-ui';
import { type DonutChartConfig, DOSSIER_TEMPLATE_ID, type DossierState } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { firstValueFrom, Observable } from 'rxjs';
import { DossierStatesMapService } from '@services/entity-services/dossier-states-map.service';
import { map, tap } from 'rxjs/operators';
import { DossierStatesService } from '@services/entity-services/dossier-states.service';
import { PermissionsService } from '@services/permissions.service';
import { MatDialog } from '@angular/material/dialog';
import {
    AddEditDossierStateDialogComponent,
    AddEditDossierStateDialogData,
} from '../add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
import { SortingOrders } from '@iqser/common-ui/lib/sorting';
import { getParam } from '@iqser/common-ui/lib/utils';

@Component({
    templateUrl: './dossier-states-listing-screen.component.html',
    styleUrls: ['./dossier-states-listing-screen.component.scss'],
    providers: listingProvidersFactory(DossierStatesListingScreenComponent),
})
export class DossierStatesListingScreenComponent extends ListingComponent<DossierState> implements OnInit, OnDestroy {
    readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
    readonly iconButtonTypes = IconButtonTypes;
    readonly tableHeaderLabel = _('dossier-states-listing.table-header.title');
    readonly tableColumnConfigs: TableColumnConfig<DossierState>[] = [
        { label: _('dossier-states-listing.table-col-names.name'), sortByKey: 'name', width: '3fr' },
        { label: _('dossier-states-listing.table-col-names.rank'), sortByKey: 'rank', class: 'flex-center' },
        { label: _('dossier-states-listing.table-col-names.dossiers-count'), class: 'flex-center' },
    ];
    readonly chartConfig$: Observable<DonutChartConfig[]>;

    constructor(
        private readonly _dialog: MatDialog,
        private readonly _dossierStatesMapService: DossierStatesMapService,
        private readonly _dossierStatesService: DossierStatesService,
        private readonly _loadingService: LoadingService,
        readonly permissionsService: PermissionsService,
    ) {
        super();
        this.chartConfig$ = this._dossierStatesMapService.get$(this.#dossierTemplateId).pipe(
            tap(states => this.entitiesService.setEntities(states)),
            map(states => this.#chartConfig(states)),
        );
    }

    async ngOnInit(): Promise<void> {
        this.sortingService.setSortingOption({
            column: 'rank',
            order: SortingOrders.asc,
        });
        await firstValueFrom(this._dossierStatesService.loadAllForTemplate(this.#dossierTemplateId));
        this._loadingService.stop();
    }

    openAddStateDialog() {
        this._dialog.open<AddEditDossierStateDialogComponent, AddEditDossierStateDialogData>(AddEditDossierStateDialogComponent, {
            ...defaultDialogConfig,
            data: {
                dossierTemplateId: this.#dossierTemplateId,
            },
        });
    }

    #chartConfig(states: DossierState[]): DonutChartConfig[] {
        return states.map(state => ({
            value: state.dossierCount,
            label: state.name,
            key: state.name,
            color: state.color,
        }));
    }
}
