import {
  Component,
  DestroyRef,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild,
  inject
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UntypedFormControl } from '@angular/forms';
import { tap } from 'rxjs/operators';
import { EditableComponent } from '../editable/editable.component';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'edit-selection',
  templateUrl: './edit-selection.component.html',
  styleUrls: ['./edit-selection.component.html'],
  standalone: false
})
export class EditSelectionComponent implements OnChanges, OnInit {
  @Input() choices: string[] = [];
  @Input() value!: string;
  @Output() update = new EventEmitter();

  @ViewChild('editableComponent')
  editableComponent!: EditableComponent;
  inputControl: UntypedFormControl = new UntypedFormControl(null);

  private destroyRef = inject(DestroyRef);

  handleDataUpdated() {
    const newValue = this.inputControl.value;
    if (newValue !== this.value) {
      this.update.emit(newValue);
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['value']) {
      this.inputControl.setValue(changes['value'].currentValue, { emitEvent: false });
    }
  }

  ngOnInit(): void {
    /**
     * auto close after a selection
     */
    this.inputControl.valueChanges
      .pipe(
        takeUntilDestroyed(this.destroyRef),
        tap(() => {
          this.editableComponent.toViewMode();
        })
      )
      .subscribe();
  }
}