import React, { Component } from 'react';
import { Button, Input, Row, Col, Label } from 'reactstrap';

export default class  Settings extends Component {

constructor(props) {
 super(props);
 this.state = { tallyPort: '', companyYear: '', interval: '', timeRange: '',
 databasePort: '', databaseUserName: '', databasePassword: '' };
}

handleChange = (stateName, e) => {
 this.setState({ stateName: e.target.value });
}
handleSave = () => {
 console.log(this.state.tallyPort);
 console.log(this.state.companyYear);
 console.log(this.state.interval);
 console.log(this.state.timeRange);
 console.log(this.state.databasePort);
 console.log(this.state.databaseUserName);
 console.log(this.state.databasePassword);
}

render() {
return(
  <div className="dashboard" >
    <div className='container'>
      <Row>
        <Col sm="2"><Label><b>Tally Server Port</b></Label></Col>
        <Col sm="8">
          <Input placeholder="tally server port (e.g. http://localhost:9000/)" name="tallyPort" required onChange={this.handleChange.bind(this, 'tallyPort')}  />
        </Col>
      </Row>
      <br />
      <Row>
        <Col sm="2"><Label><b>Company Year</b></Label></Col>
        <Col sm="8">
          <Input placeholder="Company Year" name="companyYear" required onChange={this.handleChange.bind(this, 'companyYear')} />
        </Col>
      </Row>
      <br />
      <Row>
        <Col sm="2"><Label><b>Interval For Pulling Data</b></Label></Col>
        <Col sm="8">
          <Input placeholder="Interval Time" name="interval" required onChange={this.handleChange.bind(this, 'companyYear')} />
        </Col>
      </Row>
      <br />
      <Row>
        <Col sm="2"><Label><b>Time Range For Pulling Data </b></Label></Col>
        <Col sm="8">
          <Input placeholder="Time Range" name="timeRange" required onChange={this.handleChange.bind(this, 'companyYear')} />
        </Col>
      </Row>
      <br />
      <Row>
        <Col sm="2"><Label><b>Database Port </b></Label></Col>
        <Col sm="8">
          <Input placeholder="Database Port" name="databasePort" required onChange={this.handleChange.bind(this, 'companyYear')} />
        </Col>
      </Row>
      <br />
      <Row>
        <Col sm="2"><Label><b>Database UserName </b></Label></Col>
        <Col sm="8">
          <Input placeholder="Database UserName" name="databaseUserName" required onChange={this.handleChange.bind(this, 'companyYear')} />
        </Col>
      </Row>
      <br />
      <Row>
        <Col sm="2"><Label><b>Database Password </b></Label></Col>
        <Col sm="8">
          <Input placeholder="Database Password" name="databasePassword" required onChange={this.handleChange.bind(this, 'companyYear')} />
        </Col>
      </Row>
      <br />
      <Button style={{ width: '200px', marginLeft: '720px'}} onClick={this.handleSave.bind(this)} color="primary">Save</Button>
    </div>
  </div>
);
}
}

handleChange(stateName, e) {
    this.setState({ [stateName]: e.target.value });
}