import { connect } from 'react-redux'
import { unconfirmedTransactionsListSelector } from '../../selectors'
import ConfirmTransactionSwitch from './confirm-transaction-switch.component'

const mapStateToProps = (state, ownProps) => {
  const {
    metamask: { unapprovedTxs },
  } = state
  const {
    match: { params = {}, url },
  } = ownProps
  const urlId = url?.match(/\d+/u) && url?.match(/\d+/u)[0]
  const { id: paramsId } = params
  const transactionId = paramsId || urlId

  const unconfirmedTransactions = unconfirmedTransactionsListSelector(state)
  const totalUnconfirmed = unconfirmedTransactions.length
  const transaction = totalUnconfirmed
    ? unapprovedTxs[transactionId] || unconfirmedTransactions[0]
    : {}

  return {
    txData: transaction,
  }
}

export default connect(mapStateToProps)(ConfirmTransactionSwitch)