import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isArray } from 'exotic'
import { toCommonState } from '@skava/ui/dist/state'
import { PaymentList as PaymentListPlaceholder } from 'abstractions/PaymentMethod/List'
import { PaymentListProps } from './typings'
import { defaultRenderText } from './renderProps'

@observer
class PaymentList extends React.Component<PaymentListProps> {
  static defaultProps = {
    className: '',
    renderText: defaultRenderText,
  }
  render() {
    const { list, ...remainingProps } = this.props
    const paymentList = isArray(list) && list.map(toCommonState)
    const hasSinglePayment = paymentList.length === 1
    return (
      <PaymentListPlaceholder hasSinglePayment={hasSinglePayment} list={paymentList} {...remainingProps} />
    )
  }
}

export { PaymentList }
export default PaymentList