import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { User } from '@red/domain';
import { List } from '@iqser/common-ui/lib/utils';
import { MatFormField } from '@angular/material/form-field';
import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
import { FormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { NgForOf, NgTemplateOutlet } from '@angular/common';
import { CircleButtonComponent, StopPropagationDirective } from '@iqser/common-ui';
import { InitialsAvatarComponent } from '@common-ui/users';

@Component({
    selector: 'redaction-assign-user-dropdown',
    templateUrl: './assign-user-dropdown.component.html',
    styleUrls: ['./assign-user-dropdown.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [
        MatFormField,
        MatSelect,
        MatSelectTrigger,
        MatOption,
        FormsModule,
        TranslateModule,
        NgTemplateOutlet,
        StopPropagationDirective,
        CircleButtonComponent,
        NgForOf,
        InitialsAvatarComponent,
    ],
})
export class AssignUserDropdownComponent {
    private _currentUser: User | string;
    oldUser: User | string;
    @Input() options: List<User | string>;
    @Output() readonly save = new EventEmitter<User | string>();
    @Output() readonly cancel = new EventEmitter();

    constructor() {}

    get value(): User | string {
        return this._currentUser;
    }

    @Input()
    set value(value: User | string) {
        if (this.oldUser === undefined) {
            this.oldUser = value;
        }
        this._currentUser = value;
    }

    getContext(user: User | string) {
        return { userId: typeof user === 'string' ? user : user?.id };
    }
}
