import Api from “api-maker/api” import formatNumber from “format-number” import PropTypes from “prop-types” import React from “react”

const inflection = require(“inflection”)

export default class BootstrapMoneyInput extends React.Component {

constructor(props) {
  super(props)
  this.state = {}

  let formatOptions = {
    decimal: I18n.t("number.currency.format.separator"),
    integerSeparator: I18n.t("number.currency.format.delimiter")
  }
  this.formatter = formatNumber(formatOptions)
}

render() {
  return (
    <div className="component-api-maker-bootstrap-money-input">
      <input defaultValue={this.inputDefaultCentsValue()} id={this.inputCentsId()} name={this.inputCentsName()} ref="input" type="hidden" />

      <div className="input-group">
        <input
          className={this.props.className}
          defaultValue={this.inputDefaultValue()}
          id={this.inputId()}
          onBlur={() => this.setAmount()}
          onChange={() => this.setCents()}
          onKeyUp={() => this.setCents()}
          placeholder={this.props.placeholder}
          ref="whole"
          type="text"
          />
        <select className="component-bootstrap-money-input" defaultValue={this.inputCurrencyValue()} id={this.inputCurrencyId()} name={this.inputCurrencyName()} onChange={() => { this.onCurrencyChanged() }} ref="currency">
          <option></option>
          {this.props.currenciesCollection.map(option => (
            <option key={`select-option-${option[1]}`} value={option[1]}>
              {this.props.small && option[1]}
              {!this.props.small && option[0]}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

inputCurrencyId() {
  return `${this.inputId()}_currency`
}

inputCurrencyName() {
  if (this.props.currencyName)
    return this.props.currencyName

  return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_currency]`
}

inputCurrencyValue() {
  let value = this.props.model[this.props.attribute]()

  if (value) {
    return MoneyFormatter.currencyFromMoney(value).code
  } else {
    return "DKK"
  }
}

inputDefaultValue() {
  let value = this.props.model[this.props.attribute]()

  if (value) {
    return MoneyFormatter.fromMoney({amount: value.amount, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
  } else {
    return ""
  }
}

inputDefaultCentsValue() {
  let value = this.props.model[this.props.attribute]()

  if (this.refs.input)
    return this.refs.input.value

  if (value)
    return MoneyFormatter.amountFromMoney(value)
}

inputCentsId() {
  return `${this.inputId()}_cents`
}

inputCentsName() {
  if (this.props.name)
    return this.props.name

  return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_cents]`
}

inputId() {
  return `${this.props.model.modelClassData().paramKey}_${inflection.underscore(this.props.attribute)}`
}

onCurrencyChanged() {
  if (this.props.onChange)
    this.props.onChange()
}

setAmount() {
  if (!this.refs.input.value && this.refs.input.value == "") {
    this.refs.whole.value = ""
  } else {
    let cents = parseFloat(this.refs.input.value)
    let formatted = MoneyFormatter.fromMoney({amount: cents, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()

    this.refs.whole.value = formatted
  }
}

setCents() {
  let whole = MoneyFormatter.stringToFloat(this.refs.whole.value)
  let cents = parseInt(whole * 100)
  let oldCents = parseInt(this.refs.input.value)
  this.refs.input.value = cents

  if (this.props.onChange && oldCents != cents)
    this.props.onChange()
}

}

BootstrapMoneyInput.propTypes = {

currenciesCollection: PropTypes.array.isRequired

}