import React from 'react'
import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react'
import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'

const cashInAndOutHeaderStyle = { marginLeft: 6 }

const cashInHeader = (
  <div>
    <TxInIcon />
    <span style={cashInAndOutHeaderStyle}>Cash-in</span>
  </div>
)

const cashOutHeader = (
  <div>
    <TxOutIcon />
    <span style={cashInAndOutHeaderStyle}>Cash-out</span>
  </div>
)

const getOverridesFields = currency => {
  return [
    {
      name: 'name',
      width: 280,
      size: 'sm',
      view: it => `${it}`
    },
    {
      header: cashInHeader,
      name: 'cashIn',
      display: 'Cash-in',
      width: 130,
      textAlign: 'right',
      suffix: '%'
    },
    {
      header: cashOutHeader,
      name: 'cashOut',
      display: 'Cash-out',
      width: 130,
      textAlign: 'right',
      suffix: '%',
      inputProps: {
        decimalPlaces: 3
      }
    },
    {
      name: 'fixedFee',
      display: 'Fixed fee',
      width: 155,
      doubleHeader: 'Cash-in only',
      textAlign: 'right',
      suffix: currency
    },
    {
      name: 'minimumTx',
      display: 'Minimum Tx',
      width: 155,
      doubleHeader: 'Cash-in only',
      textAlign: 'right',
      suffix: currency
    },
    {
      name: 'cashOutFixedFee',
      display: 'Fixed fee',
      width: 155,
      doubleHeader: 'Cash-out only',
      textAlign: 'right',
      suffix: currency
    }
  ]
}

const overrides = currency => {
  return getOverridesFields(currency)
}

export { overrides }