import {
  Component,
  computed,
  inject
} from '@angular/core';
import { CommonModule } from '@angular/common';

import { ElementPickerService } from '../application/element-picker.service';
import { ThemeRegistryService } from '../application/theme-registry.service';

@Component({
  selector: 'app-theme-picker-overlay',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './theme-picker-overlay.component.html'
})
export class ThemePickerOverlayComponent {
  readonly picker = inject(ElementPickerService);
  readonly registry = inject(ThemeRegistryService);

  readonly hoveredEntry = computed(() => {
    return this.registry.getDefinition(this.picker.hoveredKey());
  });

  cancel(): void {
    this.picker.cancel();
  }
}