import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { Authentication } from '../../../services/Authentication';
import { loadStripe, Stripe, StripeElements } from '@stripe/stripe-js';
import { firstValueFrom } from 'rxjs';

@Component({
  selector: 'store-payment',
  templateUrl: './payment.component.html',
  styleUrl: './payment.component.css',
  imports: [ FormsModule, CommonModule, RouterModule ]
})
export class PaymentComponent {

    stripe: Stripe | null = null;
    elements: StripeElements | null = null;

    async ngOnInit(){

        let ApiKey = await firstValueFrom(this.http.get<string>("/api/payment/publickey"));

        this.stripe = await loadStripe(ApiKey);
        if (this.stripe){
            this.elements = this.stripe?.elements();
        }
    }

    ngAfterViewInit(){
        if (this.elements){
            const cardStyle = {
                base: {
                    color: '#32325d',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSize: '16px',
                    '::placeholder': {
                        color: '#aab7c4',
                    }
                },
                invalid: {
                    color: '#fa755a',
                }
            }
            const card = this.elements.create('card', { style: cardStyle });
            card.mount('#card-element');
        }
    }

  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
    this.title.setTitle("Payment | Mistox");
   
    http.post<void[]>("api/product/getall", null).subscribe(
      response => {
        
      }
    )
  };

}