import React from 'react';
import { Form, Row, Col } from "react-bootstrap";
import PropTypes from 'prop-types';

class GasTypes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      gasTypes: [
        {
          name: "Ethanol e85",
          type: 'E85',
        },
        {
          name: "Sans plomb 95 E10",
          type: "E10"
        },
        {
          name: "Sans plomb 95",
          type: "SP95"
        },
        {
          name: "Sans plomb 98",
          type: "SP98"
        },
        {
          name: "Gazole",
          type: "Gazole"
        },
        {
          name: "GPL",
          type: "GPLc"
        }
      ]
    };
  }

  render() {
    const {
      gasTypes,
    } = this.state;
    const {
      selectGasType,
      selectedGasType,
    } = this.props;

    return (
      <Row style={{ width: "100%" }}>
        <Col>
          <Form.Control as="select" value={selectedGasType} onChange={selectGasType}>
            {gasTypes.map(gasType => (<option key={gasType.type} value={gasType.type}>{gasType.name}</option>))}
          </Form.Control>
        </Col>
      </Row>
    );
  }
}

GasTypes.propTypes = {
  selectedGasType: PropTypes.string.isRequired,
  selectGasType: PropTypes.func.isRequired,
};

export default GasTypes;