// Listen for all 3 fields rendered to the screen.
window.addEventListener('all-fields-ready', () => {
  console.log('Card fields have been rendered.')
});

// Listen for when all fields are tokenized
window.addEventListener('all-fields-tokenized', (event: CustomEvent) => {
    const { detail } = event;
    
    if (detail.success) {
        // All fields were successfully tokenized
        console.log('All fields tokenized successfully');
        const paymentToken = detail.paymentToken;
        submitPaymentForm(paymentToken);
    } else {
        // Tokenization failed for one or more fields
        console.error('Field tokenization failed:', detail.message);
        displayError(detail.message);
    }
});

// Listen for validation events
window.addEventListener('field-validation', (event) => {
    const { success, message, fieldName } = event.detail;
    if (!success) {
        console.log(`Validation failed for ${fieldName}: ${message}`);
    }
});

// Listen for individual field tokenization events
window.addEventListener('field-tokenization', (event) => {
    const { success, message, fieldName } = event.detail;
    if (success) {
        console.log(`${fieldName} successfully tokenized`);
    } else {
        console.log(`Failed to tokenize ${fieldName}: ${message}`);
    }
});

// Listen for individual field initialization
window.addEventListener('field-initiated', (event) => {
    const { success, message } = event.detail;
    if (success) {
        console.log('TokenFieldSDK initialized successfully');
    }
});

// Listen for card type
  window.addEventListener('card-type', (e) => {
      console.log(e.detail.typeData.type); // visa
  });