import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
    selector: 'iqser-input-with-action',
    templateUrl: './input-with-action.component.html',
    styleUrls: ['./input-with-action.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InputWithActionComponent {
    @Input() placeholder = '';
    @Input() hint?: string;
    @Input() width: number | 'full' = 250;
    @Input() icon?: string;
    @Input() autocomplete: 'on' | 'off' = 'on';
    @Input() value = '';
    @Output() readonly action = new EventEmitter<string>();
    @Output() readonly valueChange = new EventEmitter<string>();

    constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}

    get hasContent(): boolean {
        return !!this.value?.length;
    }

    get computedWidth(): string {
        return this.width === 'full' ? '100%' : `${this.width}px`;
    }

    get isSearch(): boolean {
        return !this.icon;
    }

    reset(): void {
        this.value = '';
        this.valueChange.emit(this.value);
        this._changeDetectorRef.markForCheck();
    }

    executeAction($event: MouseEvent): void {
        $event?.stopPropagation();

        if (this.hasContent) {
            this.action.emit(this.value);
        }
    }
}