import { ChangeDetectorRef, Component, HostBinding, Input, OnInit, ViewChild } from '@angular/core';
import type { IComment, User } from '@red/domain';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { PermissionsService } from '@services/permissions.service';
import { InputWithActionComponent, LoadingService } from '@iqser/common-ui';
import { Observable } from 'rxjs';
import { CommentingService } from '../../services/commenting.service';
import { tap } from 'rxjs/operators';
import { FilePreviewStateService } from '../../services/file-preview-state.service';
import { ManualRedactionService } from '../../services/manual-redaction.service';
import { getCurrentUser } from '@iqser/common-ui/lib/users';
import { ContextComponent, trackByFactory } from '@iqser/common-ui/lib/utils';

interface CommentsContext {
    hiddenComments: boolean;
}

@Component({
    selector: 'redaction-comments',
    templateUrl: './comments.component.html',
    styleUrls: ['./comments.component.scss'],
})
export class CommentsComponent extends ContextComponent<CommentsContext> implements OnInit {
    @HostBinding('class.hidden') private _hidden = true;
    @ViewChild(InputWithActionComponent) private readonly _input: InputWithActionComponent;
    @Input() annotation: AnnotationWrapper;
    readonly trackBy = trackByFactory();
    readonly currentUser = getCurrentUser<User>();
    hiddenComments$: Observable<boolean>;

    constructor(
        readonly permissionsService: PermissionsService,
        private readonly _manualRedactionService: ManualRedactionService,
        private readonly _commentingService: CommentingService,
        private readonly _loadingService: LoadingService,
        private readonly _changeRef: ChangeDetectorRef,
        protected readonly _state: FilePreviewStateService,
    ) {
        super();
    }

    ngOnInit() {
        this.hiddenComments$ = this._commentingService.isActive$(this.annotation.id).pipe(
            tap(active => {
                this._hidden = !active;
            }),
        );

        super._initContext({
            hiddenComments: this.hiddenComments$,
        });
    }

    async addComment(value: string): Promise<void> {
        if (!value) {
            return;
        }
        this._loadingService.start();
        const { dossierId, fileId } = this._state;
        const commentId = await this._manualRedactionService.addComment(value, this.annotation.id, dossierId, fileId);
        this.annotation.comments.push({
            text: value,
            id: commentId,
            annotationId: this.annotation.id,
            user: this.currentUser.id,
        });
        this._input.reset();
        this._changeRef.markForCheck();
        this._loadingService.stop();
    }

    toggleExpandComments(): void {
        this._commentingService.toggle(this.annotation.id);
    }

    async deleteComment(comment: IComment): Promise<void> {
        this._loadingService.start();
        const { dossierId, fileId } = this._state;
        await this._manualRedactionService.deleteComment(comment.id, this.annotation.id, dossierId, fileId);
        this.annotation.comments.splice(this.annotation.comments.indexOf(comment), 1);
        this._changeRef.markForCheck();
        this._loadingService.stop();
    }
}
