import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CircleButtonComponent, CircleButtonType, CircleButtonTypes } from '../../buttons';

@Component({
    selector: 'iqser-editable-input [value]',
    templateUrl: './editable-input.component.html',
    styleUrls: ['./editable-input.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgIf, CircleButtonComponent, FormsModule],
})
export class EditableInputComponent implements OnChanges {
    @Input() id?: string;
    @Input() parentId?: string;
    @Input() value!: string;
    @Input() editTooltip?: string;
    @Input() saveTooltip?: string;
    @Input() cancelTooltip?: string;
    @Input() placeholder = '';
    @Input() class?: string;
    @Input() showPreview = true;
    @Input() canEdit = true;
    @Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
    @Input() helpModeKey: string = '';
    @Input() lastChild = false;
    @Output() readonly save = new EventEmitter<string>();
    textArea?: { width: number; height: number };
    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;
        }
        if (changes['parentId']?.currentValue) {
            this.setTextAreaSize();
        }
    }

    setTextAreaSize() {
        setTimeout(() => {
            const element = document.getElementById(this.id as string) as HTMLElement;
            const parentElement = document.getElementById(this.parentId as string) as HTMLElement;
            const width = parentElement.offsetWidth - 98;
            let height = (this.lastChild ? parentElement.offsetHeight : element.offsetHeight) - 16;
            if (this.lastChild) {
                const lastChildIndex = Number(this.id?.split('-')[2]);
                height = height - lastChildIndex * element.offsetHeight;
            }
            this.textArea = { width, height };
        }, 50);
    }

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