import { NgTemplateOutlet } from '@angular/common';
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { Dialog } from 'primeng/dialog';
import { Drawer } from 'primeng/drawer';

@Component({
  selector: 'shared-dialog',
  templateUrl: './dialog.component.html',
  imports: [Dialog, Drawer, NgTemplateOutlet],
  styles: [
    `
      :host ::ng-deep .shared-mobile-drawer.p-drawer-bottom {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      :host ::ng-deep .shared-mobile-drawer .p-drawer-content {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
      }
    `,
  ],
})
export class SharedDialogComponent implements OnInit {
  @Input() header = '';
  @Input() visible = false;
  @Output() visibleChange = new EventEmitter<boolean>();

  @Input() modal = true;
  @Input() closable = true;
  @Input() draggable = false;
  @Input() style: Record<string, string> | undefined;
  @Input() breakpoints: Record<string, string> | undefined;
  @Input() mobileBreakpoint = 768;
  @Input() mobileDrawer = true;
  @Input() mobileDrawerHeight = '90svh';

  @Output() onHide = new EventEmitter<any>();

  isMobile = false;

  ngOnInit() {
    this.updateViewportMode();
  }

  @HostListener('window:resize')
  onResize() {
    this.updateViewportMode();
  }

  onVisibilityChange(nextValue: boolean) {
    this.visible = nextValue;
    this.visibleChange.emit(nextValue);
  }

  private updateViewportMode() {
    this.isMobile = typeof window !== 'undefined' && window.innerWidth <= this.mobileBreakpoint;
  }
}
