import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, Optional, ViewChild } from '@angular/core';
import { Dossier, File, IFileAttributeConfig } from '@red/domain';
import { HelpModeService } from '@iqser/common-ui';
import { Debounce } from '@iqser/common-ui/lib/utils';

@Component({
    selector: 'redaction-workflow-item [file] [dossier] [displayedAttributes]',
    templateUrl: './workflow-item.component.html',
    styleUrls: ['./workflow-item.component.scss'],
})
export class WorkflowItemComponent implements OnInit {
    @ViewChild('actionsWrapper', { static: true }) private _actionsWrapper: ElementRef;
    @Input() file: File;
    @Input() dossier: Dossier;
    @Input() displayedAttributes: IFileAttributeConfig[];
    width: number;

    constructor(private readonly _changeRef: ChangeDetectorRef, @Optional() readonly helpModeService: HelpModeService) {}

    ngOnInit(): void {
        const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
            this._updateItemWidth(entries[0]);
        });
        _observer.observe(this._actionsWrapper.nativeElement);
    }

    @Debounce(30)
    private _updateItemWidth(entry: ResizeObserverEntry): void {
        this.width = entry.contentRect.width;
        this._changeRef.markForCheck();
    }
}
