import { Component, Input } from '@angular/core';
import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
import { Observable, of } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
import { Dictionary, DOSSIER_TEMPLATE_ID, DossierTemplate, ENTITY_TYPE } from '@red/domain';
import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
import { AsyncPipe, NgIf } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { TenantPipe } from '@iqser/common-ui/lib/tenants';

@Component({
    selector: 'redaction-dossier-template-breadcrumbs',
    templateUrl: './dossier-template-breadcrumbs.component.html',
    styleUrls: ['./dossier-template-breadcrumbs.component.scss'],
    standalone: true,
    imports: [NgIf, AsyncPipe, RouterLink, MatIconModule, TranslateModule, RouterLinkActive, TenantPipe],
})
export class DossierTemplateBreadcrumbsComponent {
    @Input() root = false;
    readonly dossierTemplate$: Observable<DossierTemplate>;
    readonly activeDictionary$: Observable<Dictionary>;

    constructor(
        private readonly _dossierTemplatesService: DossierTemplatesService,
        private readonly _dictionariesMapService: DictionariesMapService,
        route: ActivatedRoute,
    ) {
        this.dossierTemplate$ = route.paramMap.pipe(
            map(params => params.get(DOSSIER_TEMPLATE_ID)),
            switchMap(dossierTemplateId => _dossierTemplatesService.getEntityChanged$(dossierTemplateId)),
        );
        this.activeDictionary$ = route.paramMap.pipe(
            map(params => [params.get(DOSSIER_TEMPLATE_ID), params.get(ENTITY_TYPE)] as const),
            switchMap(([dossierTemplateId, dictionary]) =>
                dictionary ? _dictionariesMapService.watch$(dossierTemplateId, dictionary) : of(undefined),
            ),
        );
    }
}
