import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { loadStripe, Stripe } from '@stripe/stripe-js';
import { DepositService } from '../../service/deposit.service';
import { debounceTime } from 'rxjs';
import { environment } from '../../../environments/environment';
import { NgIf } from '@angular/common';
import {
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle
} from "@angular/material/dialog";

@Component({
  selector: 'app-deposit',
  standalone: true,
  imports: [ReactiveFormsModule, NgIf, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose],
  templateUrl: './deposit.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DepositComponent implements OnInit {
  protected form!: FormGroup;
  protected errorMsg = '';
  private stripe: Stripe | null = null;
  private service: DepositService = inject(DepositService);
  public dialogRef: MatDialogRef<DepositComponent> = inject(MatDialogRef<DepositComponent>);

  async ngOnInit() {
    this.form = new FormGroup({
      amount: new FormControl(50, [Validators.min(50)]),
    });

    this.form.controls['amount'].valueChanges.pipe(debounceTime(1000)).subscribe((value) => {
      if (value < 50) {
        this.errorMsg = 'Minimum Einzahlungsbetrag ist 50€';
      }
    });

    this.stripe = await loadStripe(environment.STRIPE_KEY);
  }

  submit() {
    if (!this.stripe) {
      this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
      return;
    }
    if (!this.form.valid) {
      this.errorMsg = 'Bitte geben Sie einen gültigen Betrag ein.';
      return;
    }

    this.service.handleDeposit(this.form.value.amount as number).subscribe(({ sessionId }) => {
      this.stripe?.redirectToCheckout({ sessionId });
    });
  }

  public closeDialog(): void {
    this.dialogRef.close();
  }
}