const { registerPaymentMethod } = window.wc.wcBlocksRegistry
const { getSetting } = window.wc.wcSettings
const { decodeEntities } = window.wp.htmlEntities
const { createElement } = window.wp.element

  
const settings = getSetting('anycoin_payment_data', {})


const Label = (props) => {
  const { PaymentMethodLabel } = props.components
  return createElement(
    'span',
    { style: { width: '100%' } },
    createElement(PaymentMethodLabel, {
      text: decodeEntities(settings.title || ''),
    }),
    settings.icon &&
      createElement('img', {
        src: settings.icon,
        alt: 'AnyCoin',
        style: {
          float: 'right',
          marginRight: '20px',
          height: '24px',
          width: 'auto',
        },
      })
  )
}


const Content = () => {
  return createElement('div', {
    dangerouslySetInnerHTML: {
      __html: decodeEntities(settings.description || ''),
    },
  })
}


registerPaymentMethod({
  name: 'anycoin_payment',
  label: createElement(Label),
  content: createElement(Content),
  edit: createElement(Content),
  canMakePayment: () => true,
  ariaLabel: decodeEntities(settings.title || 'AnyCoin Payment'),
  supports: {
    features: settings.supports || ['products'],
  },
})
