import { DOCUMENT } from '@angular/common';
import {
  AfterViewInit,
  Component,
  ElementRef,
  HostListener,
  OnInit,
  inject,
  input,
  output,
  signal
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScreenShareQuality, SCREEN_SHARE_QUALITY_OPTIONS } from '../../../domains/screen-share';
import { ModalBackdropComponent } from '../modal-backdrop/modal-backdrop.component';
import { portalHostElementToBody } from '../portal-host-to-body.logic';

@Component({
  selector: 'app-screen-share-quality-dialog',
  standalone: true,
  imports: [CommonModule, ModalBackdropComponent],
  templateUrl: './screen-share-quality-dialog.component.html',
  host: {
    style: 'display: contents;'
  }
})
export class ScreenShareQualityDialogComponent implements OnInit, AfterViewInit {
  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
  private readonly document = inject(DOCUMENT);
  selectedQuality = input.required<ScreenShareQuality>();
  includeSystemAudio = input(false);

  confirmed = output<ScreenShareQuality>();
  cancelled = output<undefined>();

  readonly qualityOptions = SCREEN_SHARE_QUALITY_OPTIONS;
  readonly activeQuality = signal<ScreenShareQuality>('balanced');

  @HostListener('document:keydown.escape')
  onEscape(): void {
    this.cancelled.emit(undefined);
  }

  ngOnInit(): void {
    this.activeQuality.set(this.selectedQuality());
  }

  ngAfterViewInit(): void {
    portalHostElementToBody(this.host.nativeElement, this.document.body);
  }

  chooseQuality(quality: ScreenShareQuality): void {
    this.activeQuality.set(quality);
  }

  confirm(): void {
    this.confirmed.emit(this.activeQuality());
  }
}