import React, {useState, useEffect} from 'react'
import {connect} from 'react-redux'
import { FormattedMessage } from 'react-intl'
import {getCreditMatrix, getCreditBalance, purchaseCredit} from './actions'
import StripeContainer from 'containers/Stripe/StripeContainer'
import {Paper, Slider, CircularProgress, Typography, Divider, Button} from '@material-ui/core'
import Credit from '../../components/Icons/Credit'
function CreditManager(props) {
const { matrix, balance, isRequesting, isRequestingPurchase, paymentOptions, showSuccess } = props
const { getCreditMatrix, getCreditBalance, purchaseCredit} = props
const [creditAmount, setCreditAmount] = useState(null)
useEffect(() => {
getCreditMatrix()
getCreditBalance()
}, [])
useEffect(() => {
if (matrix.length > 0)
setCreditAmount(matrix[0][0])
}, [matrix])
if (matrix.length === 0 || balance === null)
return null
const min = matrix[0][0]
const max = matrix[matrix.length - 1][0]
const sliderMarks = matrix.map(pair => ({
value: pair[0]
}))
const realAmount = _.get(_.find(matrix, pair => pair[0] === creditAmount), 1)
return (
<div style={{width:'100%'}}>
<Paper className="row" classes={{root: 'paperContainer'}}>
<Credit style={{fontSize:'36', padding: '1rem'}}/>
<div className="row" style={{justifyContent:'space-between'}}>
<Typography aria-label="credit balance" style={{padding: '1rem'}}>
<FormattedMessage id="credit.balance" values={{balance}} />
</Typography>
<Button
variant="outlined"
color="primary"
style={{margin: '1rem'}}
>
Acheter des crédits
</Button>
</div>
</Paper>
<Paper classes={{root: 'paperContainer'}}>
<div className="column" style={{alignItems: 'center'}}>
<Typography style={{padding: '1rem'}}>
<FormattedMessage
id="credit.buyWithDiscount"
values={{
creditAmount,
price: realAmount,
currency: _.get(paymentOptions, 'currency')
}} />
</Typography>
<div className="row" style={{width: '100%', alignItems: 'center', justifyContent: 'space-between', padding: '1rem'}}>
<Typography style={{padding: '1rem'}}>{min}</Typography>
<Slider
defaultValue={min}
step={null}
marks={sliderMarks}
onChange={(e, v) => setCreditAmount(v)}
min={min}
max={max}
valueLabelDisplay="auto"
/>
<Typography style={{padding: '1rem'}}>{max}</Typography>
</div>
</div>
</Paper>
{ /* this condition is a little hack for refreshing the form after success (more UX friendly) */
!showSuccess &&
<div className="paperContainer">
<StripeContainer
validate={data => purchaseCredit(creditAmount, realAmount, {
method: 'STRIPE',
data
})}
totalPrice={realAmount}
isRequesting={isRequesting}
buttonLabel="purchase credit with creditcard"
/>
</div>
}
</div>
)
}
const mapStateToProps = (state) => {
const credit = state.credit
const territory = _.get(state, 'territory.locals', []).find(t => t.territory_key === state.territory.current)
return {
matrix: credit.matrix,
balance: credit.balance,
isRequesting: credit.isRequestingMatrix || credit.isRequestingBalance || credit.isRequestingPurchase,
isRequestingPurchase: credit.isRequestingPurchase,
paymentOptions: _.get(territory, 'payment', {})
}
}
const mapDispatchToProps = dispatch => ({
getCreditMatrix: () => dispatch(getCreditMatrix()),
getCreditBalance: () => dispatch(getCreditBalance()),
purchaseCredit: (creditAmount, realAmount, payment) => dispatch(purchaseCredit(creditAmount, realAmount, payment)),
})
export default connect(mapStateToProps, mapDispatchToProps)(CreditManager)
