import InputNumber from '../src/index'
import '../assets/index.less'

function getSum (str) {
  let total = 0
  str.split('').forEach((c) => {
    const num = Number(c)

    if (!isNaN(num)) {
      total += num
    }
  })

  return total
}

export default {
  data () {
    return {
      value: 1000,
    }
  },
  render () {
    return (
      <div style='margin: 10px;'>
        <InputNumber
          defaultValue={1000}
          formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
        />
        <InputNumber
          defaultValue={100}
          formatter={value => `${value}%`}
          parser={value => value.replace('%', '')}
        />
        <InputNumber
          style='width: 100px'
          formatter={value =>
            `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          }
        />

        <div>
          <h1>In Control</h1>
          <InputNumber
            value={this.value}
            onChange={(value) => { this.value = value }}
            formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
          />
        </div>

        <div>
          <h1>Strange Format</h1>
          <InputNumber
            defaultValue={1000}
            formatter={value => `$ ${value} - ${getSum(value)}`}
            parser={value => (value.match(/^\$ ([\d\.]*) .*$/) || [])[1]}
          />
        </div>
      </div>
    )
  },
}