import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { Required } from '../../utils';
import { CircleButtonType } from '../../buttons';

@Component({
    selector: 'iqser-editable-input',
    templateUrl: './editable-input.component.html',
    styleUrls: ['./editable-input.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditableInputComponent {
    @Input() @Required() value!: string;
    @Input() editTooltip?: string;
    @Input() saveTooltip?: string;
    @Input() cancelTooltip?: string;
    @Input() placeholder?: string;
    @Input() class?: string;
    @Input() showPreview = true;
    @Input() buttonsType?: CircleButtonType;
    @Output() readonly save = new EventEmitter<string>();
    newValue = '';

    private _editing = false;

    @HostBinding('class.editing')
    get editing(): boolean {
        return this._editing;
    }

    set editing(value: boolean) {
        this._editing = value;
        this.newValue = this.value;
    }

    saveValue(): void {
        this.save.emit(this.newValue);
        this.editing = false;
    }
}