import PropTypes from "prop-types";
import React from 'react';
import {
  InputGroup,
  Card,
  CardBody,
  CardHeader,
  Col,
  FormGroup,
  Input,
  Row,
  InputGroupAddon,
  Label
} from 'reactstrap';
import CopyButton from './CopyButton';

import { calculateUnits } from '../services/unitConverter';

class Converter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { etherConversions: []};
  }

  componentDidMount() {
    this.setState({etherConversions: calculateUnits(this.props.baseEther, 'Ether')});
  }

  handleOnChange(event, key) {
    const newUnits = calculateUnits(event.target.value, key);
    this.setState({etherConversions: newUnits});
    const newBaseEther = newUnits.find(unit => unit.key === 'ether');
    this.props.updateBaseEther(newBaseEther.value);
  }

  render() {
    return(
      <Row className="justify-content-md-center">
        <Col xs="12" sm="9" lg="9">
          <Card>
            <CardHeader>
              <strong>Ether Converter</strong>
            </CardHeader>
            <CardBody>
              {
                this.state.etherConversions.map(unit => (
                  <FormGroup key={unit.key}>
                    <Label htmlFor={unit.name}>{unit.name}</Label>
                    <InputGroup>
                      <Input id={unit.name} placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
                      <InputGroupAddon addonType="append">
                        <CopyButton text={unit.value} title="Copy value to clipboard" size={2}/>
                      </InputGroupAddon>
                    </InputGroup>
                  </FormGroup>
                ))
              }
            </CardBody>
          </Card>
        </Col>
      </Row>
    );
  }
}

Converter.propTypes = {
  baseEther: PropTypes.string,
  updateBaseEther: PropTypes.func
};

export default Converter;

@@ -584,16 +584,621 @@
   const 
+value = event.target.value;%0A    let newUnits;%0A    if (value.slice(-1) === '.') %7B%0A      // %60calculateUnits()%60 turns %601.%60 to %601%60 which makes it impossible%0A      // for users to get beyond the first dot when typing decimal values.%0A      // That's why we bypass recalculation all together when the last character%0A      // is a dot and only update the form control in question.%0A      newUnits = this.state.etherConversions.map(unit =%3E %7B%0A        if (unit.key === key) %7B%0A          unit.value = value;%0A        %7D%0A        return unit;%0A      %7D);%0A      this.setState(%7BetherConversions: newUnits%7D);%0A    %7D else %7B%0A      
 newUnits
@@ -1215,29 +1215,16 @@
 teUnits(
-event.target.
 value, k
@@ -1228,16 +1228,18 @@
 , key);%0A
+  
     this
@@ -1275,24 +1275,30 @@
 newUnits%7D);%0A
+    %7D%0A
     const ne

allow decimal numbers