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

@Component({
    selector: 'iqser-editable-input [value]',
    templateUrl: './editable-input.component.html',
    styleUrls: ['./editable-input.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EditableInputComponent implements OnChanges {
    @Input() value!: string;
    @Input() editTooltip?: string;
    @Input() saveTooltip?: string;
    @Input() cancelTooltip?: string;
    @Input() placeholder = '';
    @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;
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes['value']) {
            this.editing = false;
        }
    }

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