import React, { Component } from 'react';
import {
  Container, Row, Col, Table, FormGroup, Input, Button, Label
} from 'reactstrap';
import Results from './results'

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

class Gearbox 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,
      wheelDiameter: 14,
      tyreWidth: 175,
      tyreHeight: 65,
      oldGearBoxOne: '11/37',
      oldGearBoxSecond: '22/41',
      oldGearBoxThird: '28/37',
      oldGearBoxFourth: '34/35',
      oldGearBoxFifth: '39/32',
      oldGearBoxSixth: '',
      oldGearBoxGate: '15/61',
      oldGearBoxReverse: '11/39',
      newGearBoxOne: '11/41',
      newGearBoxSecond: '21/43',
      newGearBoxThird: '28/37',
      newGearBoxFourth: '30/29',
      newGearBoxFifth: '39/31',
      newGearBoxSixth: '',
      newGearBoxGate: '14/63',
      newGearBoxReverse: '11/39',
      rpm: 2500,
      speed: 90
    };

    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>
        <Row>
          <Col xs="12">
            <h1>Calculez vos rapports de boîte</h1>
          </Col>
          <Col xs="12">
            <h2>Roue</h2>
          </Col>
          <Col xs="12">
            <Table bordered>
                <thead>
                  <tr>
                      <th>Diamètre</th>
                      <th>Largeur du pneu</th>
                      <th>Hauteur du flanc</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                      <td className="align-middle col-xs-4">
                        <FormGroup>
                          <Input
                            type="select"
                            name="wheelDiameter"
                            value={this.state.wheelDiameter}
                            onChange={this.handleChange}>
                          { this.state.sizes.map( item => (
                            <option value={item} key={`select_old_diametre_${item}`}>
                            {`${item}"`}
                            </option>
                          ))}
                          </Input>
                        </FormGroup>
                      </td>
                      <td className="align-middle col-xs-4">
                        <FormGroup>
                          <Input
                            type="number"
                            name="tyreWidth"
                            step="5"
                            placeholder="Largeur du pneu"
                            value={this.state.tyreWidth}
                            onChange={this.handleChange}
                          />
                        </FormGroup>
                      </td>
                      <td className="align-middle col-xs-4">
                        <FormGroup>
                          <Input
                            type="number"
                            name="tyreHeight"
                            step="5"
                            placeholder="Hauteur du pneu"
                            value={this.state.tyreHeight}
                            onChange={this.handleChange}
                          />
                        </FormGroup>
                      </td>
                  </tr>
                </tbody>
            </Table>
          </Col>
          <Col xs="12">
            <h2>Boîte de vitesse</h2>
          </Col>
          <Col xs="12">
            <Table bordered>
              <thead>
                <tr>
                  <th></th>
                  <th>1<sup>ère</sup></th>
                  <th>2<sup>ère</sup></th>
                  <th>3<sup>ère</sup></th>
                  <th>4<sup>ère</sup></th>
                  <th>5<sup>ère</sup></th>
                  <th>6<sup>ère</sup></th>
                  <th>Pont</th>
                  <th>Marche arrière</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="align-middle">
                    Actuelle
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxOne"
                        value={this.state.oldGearBoxOne}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxSecond"
                        value={this.state.oldGearBoxSecond}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxThird"
                        value={this.state.oldGearBoxThird}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxFourth"
                        value={this.state.oldGearBoxFourth}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxFifth"
                        value={this.state.oldGearBoxFifth}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxSixth"
                        value={this.state.oldGearBoxSixth}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxGate"
                        value={this.state.oldGearBoxGate}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="oldGearBoxReverse"
                        value={this.state.oldGearBoxReverse}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                </tr>
                <tr>
                  <td className="align-middle">
                    Nouvelle
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxOne"
                        value={this.state.newGearBoxOne}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxSecond"
                        value={this.state.newGearBoxSecond}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxThird"
                        value={this.state.newGearBoxThird}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxFourth"
                        value={this.state.newGearBoxFourth}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxFifth"
                        value={this.state.newGearBoxFifth}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxSixth"
                        value={this.state.newGearBoxSixth}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxGate"
                        value={this.state.newGearBoxGate}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                  <td className="align-middle col-xs-4">
                    <FormGroup>
                      <Input
                        type="text"
                        name="newGearBoxReverse"
                        value={this.state.newGearBoxReverse}
                        onChange={this.handleChange}
                      />
                    </FormGroup>
                  </td>
                </tr>
              </tbody>
            </Table>
          </Col>
          <Col xs="12">
            <h2>Bonus</h2>
          </Col>
          <Col xs="12">
            <Row>
              <Col xs="12" md="6">
                <FormGroup>
                  <Label for="rpm">Afficher la vitesse pour le régime moteur suivant (tr/min) :</Label>
                  <Input
                    type="number"
                    id="rpm"
                    name="rpm"
                    step="50"
                    value={this.state.rpm}
                    onChange={this.handleChange}
                  />
                </FormGroup>
              </Col>
              <Col xs="12" md="6">
                <FormGroup>
                  <Label for="speed">Afficher le régime moteur pour la vitesse suivante (km/h) :</Label>
                  <Input
                    type="number"
                    step="1"
                    id="speed"
                    name="speed"
                    value={this.state.speed}
                    onChange={this.handleChange}
                  />
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col xs="12">
            <Button onClick={this.submit}>Calculer</Button>
          </Col>
        </Row>
        {
          this.state.showResult ?
            <Results
              wheelDiameter={this.state.wheelDiameter}
              tyreWidth={this.state.tyreWidth}
              tyreHeight={this.state.tyreHeight}

              oldGearBoxOne={this.state.oldGearBoxOne}
              oldGearBoxSecond={this.state.oldGearBoxSecond}
              oldGearBoxThird={this.state.oldGearBoxThird}
              oldGearBoxFourth={this.state.oldGearBoxFourth}
              oldGearBoxFifth={this.state.oldGearBoxFifth}
              oldGearBoxSixth={this.state.oldGearBoxSixth}
              oldGearBoxGate={this.state.oldGearBoxGate}
              oldGearBoxReverse={this.state.oldGearBoxReverse}

              newGearBoxOne={this.state.newGearBoxOne}
              newGearBoxSecond={this.state.newGearBoxSecond}
              newGearBoxThird={this.state.newGearBoxThird}
              newGearBoxFourth={this.state.newGearBoxFourth}
              newGearBoxFifth={this.state.newGearBoxFifth}
              newGearBoxSixth={this.state.newGearBoxSixth}
              newGearBoxGate={this.state.newGearBoxGate}
              newGearBoxReverse={this.state.newGearBoxReverse}

              rpm={this.state.rpm}
              speed={this.state.speed}
            />
          :
          (null)
        }
      </Container>
    )
  }
}

export default Gearbox;