import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui';
import { FileAttributeConfigTypes, IField } from '@red/domain';
import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';

@Component({
    selector: 'redaction-active-fields-listing',
    templateUrl: './active-fields-listing.component.html',
    styleUrls: ['./active-fields-listing.component.scss'],
    providers: listingProvidersFactory(ActiveFieldsListingComponent),
})
export class ActiveFieldsListingComponent extends ListingComponent<IField> implements OnChanges {
    readonly translations = fileAttributeTypesTranslations;
    readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title');
    readonly tableColumnConfigs: TableColumnConfig<IField>[] = [
        {
            label: _('file-attributes-csv-import.table-col-names.name'),
            class: 'name',
            width: 'minmax(0, 350px)',
        },
        {
            label: _('file-attributes-csv-import.table-col-names.type'),
            width: '150px',
        },
        {
            label: _('file-attributes-csv-import.table-col-names.read-only'),
            class: 'flex-center',
            leftIcon: 'red:read-only',
            width: 'auto',
        },
        {
            label: _('file-attributes-csv-import.table-col-names.primary'),
            class: 'flex-center',
            rightIcon: 'red:status-info',
            rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip'),
            width: 'auto',
        },
    ];
    readonly typeOptions = Object.keys(FileAttributeConfigTypes);
    @Input() entities: IField[];
    @Output() readonly entitiesChange = new EventEmitter<IField[]>();
    @Output() readonly setHoveredColumn = new EventEmitter<string>();
    @Output() readonly toggleFieldActive = new EventEmitter<IField>();

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.entities) {
            this.entitiesService.setEntities(this.entities);
        }
    }

    deactivateSelection() {
        this.allEntities.filter(field => this.listingService.isSelected(field)).forEach(field => (field.primaryAttribute = false));
        this.entitiesService.setEntities(this.allEntities.filter(field => !this.listingService.isSelected(field)));
        this.entitiesChange.emit(this.allEntities);
        this.listingService.setSelected([]);
    }

    setAttributeForSelection(attribute: string, value: any) {
        for (const item of this.listingService.selected) {
            this.allEntities.find(f => f.csvColumn === item.csvColumn)[attribute] = value;
        }
    }

    togglePrimary(field: IField) {
        if (field.primaryAttribute) {
            field.primaryAttribute = false;
            return;
        }

        for (const f of this.allEntities) {
            f.primaryAttribute = false;
        }
        field.primaryAttribute = true;
    }

    itemMouseEnterFn = (field: IField) => this.setHoveredColumn.emit(field.csvColumn);
    itemMouseLeaveFn = () => this.setHoveredColumn.emit();
}
