gami-web/app/composables/useTopupPopup.ts

import { computed, reactive, readonly } from 'vue'

export interface TopupPackage {
  id: string | number
  /** Displayed coins amount, e.g. 200 */
  coins: number
  /** Displayed price label, e.g. "20.000" */
  priceLabel: string
}

export interface TopupPaymentMethod {
  id: string
  /** Displayed method name, e.g. "GoPay" */
  name: string
  /** Displayed method icon */
  icon: string
}

export interface TopupPopupOptions {
  /** Current user balance (coins) */
  balance: number
  /** Available coin packages */
  packages: TopupPackage[]
  /** Available payment methods */
  methods: TopupPaymentMethod[]
  /** Default selected package id */
  defaultPackageId?: TopupPackage['id']
  /** Default selected method id */
  defaultMethodId?: TopupPaymentMethod['id']
}

export interface TopupPopupState {
  visible: boolean
  balance: number
  packages: TopupPackage[]
  methods: TopupPaymentMethod[]
  selectedPackageId: TopupPackage['id'] | null
  selectedMethodId: TopupPaymentMethod['id'] | null
}

const state = reactive<TopupPopupState>({
  visible: false,
  balance: 0,
  // 实际档位和支付方式由上层（useRecharge）在 open 时注入
  packages: [],
  methods: [],
  selectedPackageId: null,
  selectedMethodId: null,
})

const selectedPackage = computed(() =>
  state.packages.find(item => item.id === state.selectedPackageId) ?? null,
)

const selectedMethod = computed(() =>
  state.methods.find(item => item.id === state.selectedMethodId) ?? null,
)

const open = (options?: TopupPopupOptions) => {
  if (options) {
    state.balance = options.balance
    state.packages = options.packages ?? []
    state.methods = options.methods ?? []

    const defaultPackageId
      = options.defaultPackageId ?? options.packages?.[0]?.id ?? null
    const defaultMethodId
      = options.defaultMethodId ?? options.methods?.[0]?.id ?? null

    state.selectedPackageId = defaultPackageId
    state.selectedMethodId = defaultMethodId
  }

  state.visible = true
}

const close = () => {
  state.visible = false
}

const selectPackage = (id: TopupPackage['id']) => {
  state.selectedPackageId = id
}

const selectMethod = (id: TopupPaymentMethod['id']) => {
  state.selectedMethodId = id
}

export const useTopupPopup = () => {
  return {
    state: readonly(state),
    selectedPackage,
    selectedMethod,
    open,
    close,
    selectPackage,
    selectMethod,
  }
}