import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output,
  ViewChild,
  AfterViewInit,
  OnDestroy,
} from '@angular/core';
import { ModalAnimationService } from '@shared/services/modal-animation.service';
import gsap from 'gsap';

@Component({
  selector: 'app-confirmation',
  standalone: true,
  imports: [],
  templateUrl: './confirmation.component.html',
})
export class ConfirmationComponent implements AfterViewInit, OnDestroy {
  @Input() successful = true;
  @Output() closeConfirmation = new EventEmitter<void>();
  @ViewChild('modalBg') modalBg!: ElementRef;
  @ViewChild('modalCard') modalCard!: ElementRef;

  constructor(private modalAnimationService: ModalAnimationService) {}

  ngAfterViewInit() {
    if (this.successful) {
      this.openModal();
    }
  }

  ngOnDestroy() {
    gsap.killTweensOf([this.modalBg?.nativeElement, this.modalCard?.nativeElement]);
  }

  private openModal() {
    this.modalAnimationService.openModal(this.modalCard.nativeElement, this.modalBg.nativeElement);
  }

  public closeModal() {
    this.modalAnimationService.closeModal(
      this.modalCard.nativeElement,
      this.modalBg.nativeElement,
      () => this.closeConfirmation.emit()
    );
  }
}