maafaishal/rupiah-denominations

import React from 'react'
import PropTypes from 'prop-types'
import {
  TextField,
  Button,
  Grid,
  Typography
} from '@material-ui/core'

import { withStyles } from '@material-ui/core/styles'
import MoneyTable from 'components/moneyTable'

const styles = theme => ({
  root: {
    textAlign: 'center',
    paddingTop: 'calc(50vh - 166px)',

    '& .topHeader': {
      '& .title': {
        fontWeight: 600,
        marginBottom: 50,
        fontSize: 40,
        color: '#333'
      },

      '& img': {
        width: 300,
        marginBottom: 15
      }
    }
  },
  [theme.breakpoints.down('xs')]: {
    root: {
      textAlign: 'center',
      paddingTop: 'calc(50vh - 230px)',

      '& .topHeader': {
        '& .title': {
          fontSize: 40
        }
      },

      '& img': {
        width: '100%',
        maxWidth: 200
      }
    }
  }
})

class Index extends React.Component {
  state = {
    amount: '',
    amountLeft: null,
    process: false,
    error: '',
    result: []
  };

  // to change the values
  handleChange = name => event => {
    this.setState({ [name]: event.target.value })
  };

  // detect enter button
  _handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.processMoney()
    }
  }

  processMoney = () => {
    this.setState({ process: true, amountLeft: null, result: [], error: '' })
    const fractions = [100000, 50000, 20000, 10000, 5000, 1000, 500, 100, 50]
    let amount = parseInt(this.state.amount)
    let temp = []
    let result = []

    const validation = this.validationAmount(this.state.amount)

    if (validation) {
      amount = validation

      // calculate the minimum number of rupiahs process
      while (amount >= 50) {
        for (var i = 0; i < fractions.length; i++) {
          if (amount >= fractions[i]) {
            temp[fractions[i]] = temp[fractions[i]] ? temp[fractions[i]] + 1 : 1
            amount = amount - fractions[i]
            break
          }
        }
      }

      // sort descending the result above
      let resultOrder = temp.length - 1
      temp.forEach((value, key) => {
        result[resultOrder] = { money: key, total: value }
        resultOrder--
      })

      this.setState({ amountLeft: amount, result: result })
    }

    this.setState({ process: false })
  }

  validationAmount = (amount) => {
    amount = amount.toLowerCase()

    // check if there is 'rp' word
    if (amount.indexOf('rp') > -1) {
      const rpSplit = amount.split('rp')

      // check if amount is only Rp
      if (rpSplit[0].replace(/\s+/g, '') === '' && rpSplit[rpSplit.length - 1].replace(' ', '') === '') {
        this.setState({ error: 'Missing value!' })
        return false
      } else if (rpSplit[rpSplit.length - 1].replace(/\s+/g, '') === '') { // check if Rp is wrong position
        this.setState({ error: 'Valid character in wrong position!' })
        return false
      } else {
        amount = rpSplit[1].replace(/\s+/g, '')
      }
    }
    if (amount.indexOf('.') > -1) {
      amount = amount.replace('.', '')
    }

    // check if there are ',' & '.' in a input and after ',' is not 00
    if (amount.indexOf(',') > -1 || amount.indexOf(' ') > -1) {
      if (amount.split(',')[1] !== '00') {
        this.setState({ error: 'Invalid separator!' })
        return false
      }
    }

    return parseInt(amount)
  }

  render () {
    const { classes } = this.props
    const { amount, result, amountLeft, error } = this.state

    return (
      <div className={classes.root}>
        <div className="topHeader">
          <Typography className="title" component="h2" variant="h1" gutterBottom>
           Rupiah Denominations
          </Typography>
        </div>
        <Grid container spacing={8}>
          <Grid item xs={9}>
            <TextField
              id="standard-name"
              label="Amount"
              className={classes.textField}
              value={amount}
              onChange={this.handleChange('amount')}
              onKeyPress={this._handleKeyPress}
              margin="normal"
              error={Boolean(error)}
              helperText={error}
              fullWidth
            />
          </Grid>
          <Grid item xs={3}>
            <Button
              fullWidth
              variant="contained"
              color="primary"
              disabled={amount === ''}
              className={classes.button}
              onClick={() => this.processMoney()}
              style={{ marginTop: 30 }}
            >
              Process
            </Button>
          </Grid>
        </Grid>

        {/* display the rupiah amounts */}
        <MoneyTable data={result} amountLeft={amountLeft} />
      </div>
    )
  }
}

Index.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(Index)