import React, { Component } from 'react';
import { Container, Row, Col, Table, FormGroup, Input, Button } from 'reactstrap';
import Result from "./results"
import Explain from "./explain"

import 'bootstrap/dist/css/bootstrap.min.css';
import '../../App.css';

class Wheels extends Component {
  state = {};

  constructor(props) {
    super(props);

    const sizes = [];
    for (let i = 10; i <= 24; i += 1) {
      sizes.push(i);
    }

    this.state = {
      sizes,
      showResult: false,
      oldWheelDiameter: 14,
      oldWheelWidth: 6.5,
      oldWheelET: 37,
      oldTyreWidth: 175,
      oldTyreHeight: 65,
      newWheelDiameter: 15,
      newWheelWidth: 7,
      newWheelET: 42,
      newTyreWidth: 195,
      newTyreHeight: 50,
    };

    this.handleChange = this.handleChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const name = target.name;

     this.setState({
       [name]: value,
       showResult: false
     });
 }

 submit() {
   this.setState({
     showResult: true
   })
 }

  render() {
    return (
      <Container>
        <h1>
Calculez vos futures jantes et futurs pneus en ligne
        </h1>
        <Table bordered>
         <thead>
           <tr>
             <th></th>
             <th>Diamètre</th>
             <th>Jante</th>
             <th>Pneu</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <th scope="row">Actuel</th>
             <td>
              <FormGroup>
              <Input
                type="select"
                name="oldWheelDiameter"
                value={this.state.oldWheelDiameter}
                onChange={this.handleChange}>
              { this.state.sizes.map( item => (
                <option value={item} key={`select_old_diametre_${item}`}>
                {`${item}"`}
                </option>
              ))}
              </Input>
              </FormGroup>
             </td>
             <td>
              <Row>
                <Col xs="12" md="6">
                  <FormGroup>
                    <Input
                      type="number"
                      name="oldWheelWidth"
                      placeholder="Largeur"
                      step="0.1"
                      value={this.state.oldWheelWidth}
                      onChange={this.handleChange}
                    />
                  </FormGroup>
                </Col>
                <Col xs="12" md="6">
                  <FormGroup>
                    <Input
                      type="number"
                      name="oldWheelET"
                      placeholder="ET"
                      step="1"
                      value={this.state.oldWheelET}
                      onChange={this.handleChange}
                    />
                  </FormGroup>
                </Col>
              </Row>
             </td>
             <td>
               <Row>
                 <Col xs="12" md="6">
                   <FormGroup>
                     <Input
                       type="number"
                       name="oldTyreWidth"
                       placeholder="Largeur"
                       step="5"
                       value={this.state.oldTyreWidth}
                       onChange={this.handleChange}
                     />
                   </FormGroup>
                 </Col>
                 <Col xs="12" md="6">
                   <FormGroup>
                     <Input
                       type="number"
                       name="oldTyreHeight"
                       placeholder="Hauteur"
                       step="5"
                       value={this.state.oldTyreHeight}
                       onChange={this.handleChange}
                     />
                   </FormGroup>
                 </Col>
               </Row>
             </td>
           </tr>
           <tr>
             <th scope="row">Nouveau</th>
             <td>
              <FormGroup>
              <Input
                type="select"
                name="newWheelDiameter"
                value={this.state.newWheelDiameter}
                onChange={this.handleChange}>
              { this.state.sizes.map( item => (
                <option value={item} key={`select_new_diametre_${item}`}>
                {`${item}"`}
                </option>
              ))}
              </Input>
              </FormGroup>
             </td>
             <td>
              <Row>
                <Col xs="12" md="6">
                  <FormGroup>
                    <Input
                      type="number"
                      name="newWheelWidth"
                      placeholder="Largeur"
                      step="0.1"
                      value={this.state.newWheelWidth}
                      onChange={this.handleChange}
                    />
                  </FormGroup>
                </Col>
                <Col xs="12" md="6">
                  <FormGroup>
                    <Input
                      type="number"
                      name="newWheelET"
                      placeholder="ET"
                      step="1"
                      value={this.state.newWheelET}
                      onChange={this.handleChange}
                    />
                  </FormGroup>
                </Col>
              </Row>
             </td>
             <td>
               <Row>
                 <Col xs="12" md="6">
                   <FormGroup>
                     <Input
                       type="number"
                       name="newTyreWidth"
                       placeholder="Largeur"
                       step="5"
                       value={this.state.newTyreWidth}
                       onChange={this.handleChange}
                     />
                   </FormGroup>
                 </Col>
                 <Col xs="12" md="6">
                   <FormGroup>
                     <Input
                       type="number"
                       name="newTyreHeight"
                       placeholder="Hauteur"
                       step="5"
                       value={this.state.newTyreHeight}
                       onChange={this.handleChange}
                     />
                   </FormGroup>
                 </Col>
               </Row>
             </td>
           </tr>
         </tbody>
         <tfoot>
          <tr>
            <td colSpan="4">
              <Button onClick={this.submit}>Calculer</Button>
            </td>
          </tr>
         </tfoot>
        </Table>
        {
          this.state.showResult ?
          <Result
            oldWheelDiameter={this.state.oldWheelDiameter}
            oldWheelWidth={this.state.oldWheelWidth}
            oldWheelET={this.state.oldWheelET}
            oldTyreWidth={this.state.oldTyreWidth}
            oldTyreHeight={this.state.oldTyreHeight}
            newWheelDiameter={this.state.newWheelDiameter}
            newWheelWidth={this.state.newWheelWidth}
            newWheelET={this.state.newWheelET}
            newTyreWidth={this.state.newTyreWidth}
            newTyreHeight={this.state.newTyreHeight}
            />
          :
          (null)
        }
        <Explain />
      </Container>
    );
  }
}

export default Wheels;