platform-codebase/@packages/@plugins/src/components/PaymentMethodSelector.example.tsx

/**
 * PaymentMethodSelector Usage Examples
 *
 * This file demonstrates how to use the PaymentMethodSelector component
 * in different scenarios.
 */

import { useState } from 'react'
import { PaymentMethodSelector } from './PaymentMethodSelector'

/**
 * Example 1: Basic usage with both card and crypto options
 */
export function BasicPaymentMethodSelector() {
  const [selectedMethodId, setSelectedMethodId] = useState<string>()

  return (
    <PaymentMethodSelector
      userId="user-123"
      selectedMethodId={selectedMethodId}
      onSelect={setSelectedMethodId}
      onAddNew={(type) => {
        console.log(`Add new ${type} payment method`)
        // Open modal to add payment method
      }}
    />
  )
}

/**
 * Example 2: Card-only selector
 */
export function CardOnlySelector() {
  const [selectedMethodId, setSelectedMethodId] = useState<string>()

  return (
    <PaymentMethodSelector
      userId="user-123"
      selectedMethodId={selectedMethodId}
      onSelect={setSelectedMethodId}
      onAddNew={(type) => {
        console.log(`Add new ${type} payment method`)
      }}
      allowedTypes={['card']}
    />
  )
}

/**
 * Example 3: Crypto-only selector
 */
export function CryptoOnlySelector() {
  const [selectedMethodId, setSelectedMethodId] = useState<string>()

  return (
    <PaymentMethodSelector
      userId="user-123"
      selectedMethodId={selectedMethodId}
      onSelect={setSelectedMethodId}
      onAddNew={(type) => {
        console.log(`Add new ${type} payment method`)
      }}
      allowedTypes={['crypto']}
    />
  )
}

/**
 * Example 4: Disabled state
 */
export function DisabledSelector() {
  const [selectedMethodId, setSelectedMethodId] = useState<string>('pm-123')

  return (
    <PaymentMethodSelector
      userId="user-123"
      selectedMethodId={selectedMethodId}
      onSelect={setSelectedMethodId}
      onAddNew={(type) => {
        console.log(`Add new ${type} payment method`)
      }}
      disabled={true}
    />
  )
}

/**
 * Example 5: Integration with subscription purchase flow
 */
export function SubscriptionPaymentFlow() {
  const [selectedMethodId, setSelectedMethodId] = useState<string>()
  const [showAddModal, setShowAddModal] = useState<'card' | 'crypto' | null>(null)

  const handlePurchase = async () => {
    if (!selectedMethodId) {
      alert('Please select a payment method')
      return
    }

    // Process subscription purchase with selected payment method
    console.log('Processing subscription with method:', selectedMethodId)
  }

  return (
    <div>
      <h2>Subscribe to Premium</h2>
      <p>Select a payment method to continue</p>

      <PaymentMethodSelector
        userId="user-123"
        selectedMethodId={selectedMethodId}
        onSelect={setSelectedMethodId}
        onAddNew={(type) => setShowAddModal(type)}
      />

      <button
        onClick={handlePurchase}
        disabled={!selectedMethodId}
        style={{ marginTop: '16px' }}
      >
        Complete Purchase
      </button>

      {showAddModal && (
        <div>Add {showAddModal} modal would open here</div>
      )}
    </div>
  )
}

/**
 * Example 6: Integration with booking deposit payment
 */
export function BookingDepositPayment({ bookingId }: { bookingId: string }) {
  const [selectedMethodId, setSelectedMethodId] = useState<string>()
  const [isProcessing, setIsProcessing] = useState(false)

  const handlePayDeposit = async () => {
    if (!selectedMethodId) return

    setIsProcessing(true)
    try {
      // Process booking deposit payment
      console.log('Processing deposit for booking:', bookingId, 'with method:', selectedMethodId)
      // await api.createPaymentIntent({ ... })
    } finally {
      setIsProcessing(false)
    }
  }

  return (
    <div>
      <h3>Pay Booking Deposit</h3>

      <PaymentMethodSelector
        userId="user-123"
        selectedMethodId={selectedMethodId}
        onSelect={setSelectedMethodId}
        onAddNew={(type) => {
          console.log(`Redirect to add ${type} payment method`)
        }}
        disabled={isProcessing}
      />

      <button
        onClick={handlePayDeposit}
        disabled={!selectedMethodId || isProcessing}
      >
        {isProcessing ? 'Processing...' : 'Pay Deposit'}
      </button>
    </div>
  )
}