import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { MediaAsset } from '../../../core/media/models/media-asset.model';
import { InputComponent } from '../input/input.component';
import { ButtonComponent } from '../button/button.component';
import { MediaPickerComponent } from '../../media/media-picker/media-picker.component';

@Component({
  selector: 'app-image-field',
  standalone: true,
  imports: [FormsModule, TranslatePipe, InputComponent, ButtonComponent, MediaPickerComponent],
  templateUrl: './image-field.component.html',
  styleUrl: './image-field.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ImageFieldComponent {
  readonly value = input<string | null | undefined>('');
  readonly disabled = input(false);

  readonly valueChange = output<string>();

  protected pickerOpen = false;

  protected setValue(next: string): void {
    this.valueChange.emit(next);
  }

  protected openPicker(): void {
    this.pickerOpen = true;
  }

  protected onPicked(asset: MediaAsset): void {
    this.valueChange.emit(asset.url);
    this.pickerOpen = false;
  }

  protected remove(): void {
    this.valueChange.emit('');
  }
}