import React, { Component } from 'react';
import { Table, Row, Col } from 'reactstrap';

import { formatNumber } from '../../numbers';

class Results extends Component {
  constructor(props) {
    super(props);

    this.state = {
      wheelDiameter: this.props.wheelDiameter,
      tyreWidth: this.props.tyreWidth,
      tyreHeight: this.props.tyreHeight,

      oldGearBoxOne: this.props.oldGearBoxOne,
      oldGearBoxSecond: this.props.oldGearBoxSecond,
      oldGearBoxThird: this.props.oldGearBoxThird,
      oldGearBoxFourth: this.props.oldGearBoxFourth,
      oldGearBoxFifth: this.props.oldGearBoxFifth,
      oldGearBoxSixth: this.props.oldGearBoxSixth,
      oldGearBoxGate: this.props.oldGearBoxGate,
      oldGearBoxReverse: this.props.oldGearBoxReverse,

      newGearBoxOne: this.props.newGearBoxOne,
      newGearBoxSecond: this.props.newGearBoxSecond,
      newGearBoxThird: this.props.newGearBoxThird,
      newGearBoxFourth: this.props.newGearBoxFourth,
      newGearBoxFifth: this.props.newGearBoxFifth,
      newGearBoxSixth: this.props.newGearBoxSixth,
      newGearBoxGate: this.props.newGearBoxGate,
      newGearBoxReverse: this.props.newGearBoxReverse,

      rpm: this.props.rpm,
      speed: this.props.speed,

      labels: {
        1: 'One',
        2: 'Second',
        3: 'Third',
        4: 'Fourth',
        5: 'Fifth',
        6: 'Sixth',
        reverse: 'Reverse',
      },

      results: {
        1000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        2000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        3000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        4000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        5000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        6000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        7000: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        rpm: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
        speed: {
          1: {
            old: 0,
            new: 0,
          },
          2: {
            old: 0,
            new: 0,
          },
          3: {
            old: 0,
            new: 0,
          },
          4: {
            old: 0,
            new: 0,
          },
          5: {
            old: 0,
            new: 0,
          },
          6: {
            old: 0,
            new: 0,
          },
          reverse: {
            old: 0,
            new: 0,
          },
        },
      },
    };
  }

  componentDidMount() {
    const Pi = Math.PI;
    const C = Pi * (Number(this.state.wheelDiameter.toString().replace('"', '')) * 25.4 + 2 * Number(this.state.tyreWidth) * Number(this.state.tyreHeight) / 100) / 1000;

    const results = {};

    Object.keys(this.state.results).map((rpm) => {
      results[rpm] = {};
      Object.keys(this.state.results[rpm]).map((gear) => {
        results[rpm][gear] = {};
        Object.keys(this.state.results[rpm][gear]).map((type) => {
          let V = 0;
          let f = 0;
          let vitesseRoue = '-';
          const currentRpm = rpm === 'rpm' ? this.state.rpm : rpm;
          const rapportBoite = this.convertRapport(this.state[`${type}GearBox${this.state.labels[gear]}`]);
          const rapportPont = this.convertRapport(this.state[`${type}GearBoxGate`]);

          if (rapportBoite > 0 && rapportPont > 0) {
            if (rpm !== 'speed') {
              f = currentRpm * rapportBoite * rapportPont;
              V = f * C * 60 / 1000;
              vitesseRoue = `${formatNumber(V, 2, ',', ' ')}km/h`;
            } else {
              V = Number(this.state.speed);
              f = V / (C * 60 / 1000);
              const currentSpeedRpm = f / (rapportBoite * rapportPont);
              vitesseRoue = `${formatNumber(currentSpeedRpm, 2, ',', ' ')}tr/min`;
            }
          }

          results[rpm][gear][type] = vitesseRoue;
          return true;
        });
        return true;
      });
      return true;
    });

    this.setState({ results });
  }

  convertRapport(value) {
    if (value) {
      const _rapport = value.split('/');
      if (Number(value)) {
        return value;
      } if (_rapport.length === 2) {
        return Number(_rapport[0]) / Number(_rapport[1]);
      }
    }

    return -1;
  }

  render() {
    return (
      <Row className="result">
        <Col xs="12">
          <h2>
  Résultat
          </h2>
        </Col>
        <Col xs="12">
          <Table bordered>
            <thead>
              <tr>
                <th colSpan="2" />
                <th>
    1
                  <sup>
    ère
                  </sup>
                </th>
                <th>
    2
                  <sup>
    ème
                  </sup>
                </th>
                <th>
    3
                  <sup>
    ème
                  </sup>
                </th>
                <th>
    4
                  <sup>
    ème
                  </sup>
                </th>
                <th>
    5
                  <sup>
    ème
                  </sup>
                </th>
                <th>
    6
                  <sup>
    ème
                  </sup>
                </th>
                <th>
    Marche arrière
                </th>
              </tr>
            </thead>
            {Object.keys(this.state.results).map((tpm, index) => (
              <tbody key={`rpm_${index}`}>
                <tr>
                  <td className="align-middle" rowSpan="2">
                    {
                      tpm === 'speed'
                        ? this.state.speed
                        : tpm === 'rpm'
                          ? this.state.rpm
                          : tpm
                    }
                    {
                      tpm === 'speed'
                        ? (
                          'km/h'
                        )
                        : (
                          'tr/min'
                        )
                    }

                  </td>
                  <td className="align-middle">
                    <strong>
    Actuelle
                    </strong>
                  </td>
                  {Object.keys(this.state.results[tpm]).map((values, indexValues) => (
                    <td className="align-middle" key={`rpm_values_old_${index}_${indexValues}`}>
                      {this.state.results[tpm][values].old}
                    </td>
                  ))}
                </tr>
                <tr>
                  <td className="align-middle">
                    <strong>
    Nouvelle
                    </strong>
                  </td>
                  {Object.keys(this.state.results[tpm]).map((values, indexValues) => (
                    <td className="align-middle" key={`rpm_values_new_${index}_${indexValues}`}>
                      {this.state.results[tpm][values].new}
                    </td>
                  ))}
                </tr>
              </tbody>
            ))}
          </Table>
        </Col>
      </Row>
    );
  }
}

export default Results;