import { createReduxStore, register } from '@wordpress/data'
import type { PaymentState, PaymentActions } from '@greenpay/redux'
import { Ribbit } from '@greenpay/models'

const DEFAULT_STATE: PaymentState = {
	method: null,
	plaid: null,
	ribbit: null,
	debit: null,
	accountMask: '',
}

/**
 * Redux store to have stable data regarding payments
 */
const paymentStore = createReduxStore<PaymentState, PaymentActions, any>('green-pay/payment', {
	reducer(state = DEFAULT_STATE, action): PaymentState {
		switch (action.type) {
			case 'SET_METHOD':
				return { ...state, method: action.payload }
			case 'SET_PLAID':
				return { ...state, plaid: action.payload }
			case 'SET_RIBBIT':
				return { ...state, ribbit: action.payload }
			case 'SET_DEBIT':
				return { ...state, debit: action.payload }
			case 'SET_ACCOUNT_MASK':
				return { ...state, accountMask: action.payload }
			default:
				return state
		}
	},
	actions: {
		setMethod(method) {
			return { type: 'SET_METHOD', payload: method }
		},
		setPlaid(payload) {
			return { type: 'SET_PLAID', payload }
		},
		setRibbit(payload: Ribbit) {
			return { type: 'SET_RIBBIT', payload }
		},
		setDebit(payload) {
			return { type: 'SET_DEBIT', payload }
		},
		setAccountMask(mask) {
			return { type: 'SET_ACCOUNT_MASK', payload: mask }
		},
	},
	selectors: {
		getMethod(state: PaymentState) {
			return state.method
		},
		getPlaid(state: PaymentState) {
			return state.plaid
		},
		getRibbit(state: PaymentState) {
			return state.ribbit
		},
		getDebit(state: PaymentState) {
			return state.debit
		},
		getAccountMask(state: PaymentState) {
			return state.accountMask ?? ''
		},
	},
})

register(paymentStore)