import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { getConfig, IListable, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
import { getCurrentUser } from '@iqser/common-ui/lib/users';
import { getParam } from '@iqser/common-ui/lib/utils';
import { DefaultColorTypes, DOSSIER_TEMPLATE_ID, User } from '@red/domain';
import { DefaultColorsService } from '@services/entity-services/default-colors.service';
import { defaultColorsTranslations } from '@translations/default-colors-translations';
import { Roles } from '@users/roles';
import { combineLatest } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { AdminDialogService } from '../../services/admin-dialog.service';

interface ListItem extends IListable {
    readonly key: string;
    readonly value: string;
}

@Component({
    templateUrl: './default-colors-screen.component.html',
    styleUrls: ['./default-colors-screen.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: listingProvidersFactory(DefaultColorsScreenComponent),
})
export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {
    readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
    readonly #documineDefaultColors = ['recommendationColor', 'skippedColor', 'redactionColor'];
    readonly #isDocumine = getConfig().IS_DOCUMINE;

    readonly currentUser = getCurrentUser<User>();
    readonly roles = Roles;
    readonly translations = defaultColorsTranslations;
    readonly tableHeaderLabel = _('default-colors-screen.table-header.title');
    readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
        { label: _('default-colors-screen.table-col-names.key'), sortByKey: 'searchKey', width: '2fr' },
        { label: _('default-colors-screen.table-col-names.color'), class: 'flex-center' },
    ];
    readonly context$;

    constructor(
        private readonly _dialogService: AdminDialogService,
        private readonly _defaultColorsService: DefaultColorsService,
        private readonly _loadingService: LoadingService,
    ) {
        super();

        this.context$ = combineLatest([this._defaultColorsService.all$]).pipe(
            map(([allDefaultColors]) => {
                const color = allDefaultColors.find(c => c.id === this.#dossierTemplateId);
                const colors = DefaultColorTypes.filter(
                    c => !['requestAddColor', 'requestRemoveColor', 'dictionaryRequestColor'].includes(c),
                );
                const defaultColors = this.#isDocumine ? colors.filter(key => this.#documineDefaultColors.includes(key)) : colors;
                return defaultColors.map(key => ({
                    id: key,
                    key,
                    searchKey: key,
                    value: color[key],
                }));
            }),
            tap(colors => this.entitiesService.setEntities(colors)),
        );
    }

    ngOnInit() {
        this._loadingService.stop();
    }

    openEditColorDialog(color: ListItem) {
        this._dialogService.openDialog('editColor', { colorKey: color.key, dossierTemplateId: this.#dossierTemplateId });
    }
}
