import {
  Component,
  HostListener,
  inject,
  input,
  output
} from '@angular/core';
import { ThemeNodeDirective } from '../../../domains/theme';
import { ViewportService } from '../../../core/platform';
import { BottomSheetComponent } from '../bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-confirm-dialog',
  standalone: true,
  imports: [ThemeNodeDirective, BottomSheetComponent],
  templateUrl: './confirm-dialog.component.html',
  host: {
    style: 'display: contents;'
  }
})
export class ConfirmDialogComponent {
  title = input.required<string>();
  confirmLabel = input<string>('Confirm');
  cancelLabel = input<string>('Cancel');
  variant = input<'primary' | 'danger'>('primary');
  widthClass = input<string>('w-[320px]');
  confirmed = output<undefined>();
  cancelled = output<undefined>();

  readonly isMobile = inject(ViewportService).isMobile;

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