import React from 'react';
//MortgageCalculatorData are defined from page.jsx pass to this component via PropTypes
import PropTypes from 'prop-types';
import { FormattedRelative, FormattedNumber } from 'react-intl';
const propPrice = 200000;
const downPayment = propPrice * 0.1;
const term = 30 + ' years';
const rate = 4.6;
class MortgageCalculatorComponent extends React.Component {
render() {
//MortgageCalculatorData are defined from page.jsx pass to this component via PropTypes
const { MortgageCalculatorData } = this.props;
return (
<div className="mortgage-calculator">
<h1>Mortgage Calculator</h1>
<div className="row">
<div className="col-md-7">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Price:</label>
<input className="form-control form-control-sm" type="text" placeholder={MortgageCalculatorData.result.field_prop_asking_price.und['0'].value}
></input>
</div>
<div className="form-group">
<label>Term:</label>
<input className="form-control form-control-sm" type="text" placeholder={term} ></input>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label>% Down Payment:</label>
<input className="form-control form-control-sm" type="text" placeholder="10"></input>
</div>
<div className="form-group">
<label>Rate:</label>
<input className="form-control form-control-sm" type="text" placeholder={rate}></input>
</div>
</div>
</div>
<div className="row">
<div className="col-md-8">Mortgage Amount</div>
<div className="col-md-4 text-right">RM <FormattedNumber value={parseInt(propPrice, 10)} /></div>
</div>
<div className="row">
<div className="col-md-8">Down Payment Amount</div>
<div className="col-md-4 text-right">RM <FormattedNumber value={parseInt(downPayment, 10)} /></div>
<div className="col-md-12 separator"> </div>
</div>
<div className="row">
<div className="col-md-8">Monthly Mortgage Payment</div>
<div className="col-md-4 text-right">RM 4,605</div>
</div>
</div>
</div>
</div>
)
}
}
//MortgageCalculatorData are defined from page.jsx pass to this component via PropTypes
MortgageCalculatorComponent.defaultProps = {
MortgageCalculatorData: {},
};
MortgageCalculatorComponent.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
MortgageCalculatorData: PropTypes.object,
};
export default MortgageCalculatorComponent;