import {
  ChangeDetectionStrategy,
  Component,
  input,
  output
} from '@angular/core';
import Swal, { SweetAlertIcon } from 'sweetalert2';

@Component({
  selector: 'app-confirm-dialog',
  standalone: true,
  templateUrl: './confirm-dialog.html',
  styleUrl: './confirm-dialog.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConfirmDialog {
  readonly title = input('Are you sure?');
  readonly text = input("You won't be able to revert this!");
  readonly icon = input<SweetAlertIcon>('warning');
  readonly confirmButtonText = input('Yes, delete it!');
  readonly cancelButtonText = input('No, cancel!');
  readonly confirmButtonColor = input('#1f3f81');
  readonly cancelButtonColor = input('#ff007f');
  readonly disabled = input(false);
  readonly ariaLabel = input('Confirmation dialog trigger');

  readonly confirmed = output<void>();
  readonly cancelled = output<void>();

  async open(event?: Event): Promise<void> {
    event?.preventDefault();

    if (this.disabled()) {
      return;
    }

    const result = await Swal.fire({
      title: this.title(),
      text: this.text(),
      icon: this.icon(),
      showCancelButton: false,
      showDenyButton: true,
      confirmButtonText: this.confirmButtonText(),
      denyButtonText: this.cancelButtonText(),
      confirmButtonColor: this.confirmButtonColor(),
      denyButtonColor: this.cancelButtonColor(),
      customClass: {
        confirmButton: 'app-confirm-dialog-btn',
        denyButton: 'app-confirm-dialog-btn'
      }
    });

    if (result.isConfirmed) {
      this.confirmed.emit();
      return;
    }

    if (result.isDenied) {
      this.cancelled.emit();
    }
  }
}
