import React from 'react';
import { Modal, Button, ListGroup } from "react-bootstrap";
import PropTypes from 'prop-types';
import { FaWaze } from "react-icons/fa";
import { gasTypes } from "../config";

import { capitalizeFirstLetter} from "../helpers";

class GasStation extends React.Component {
  /**
   * Méthode permettant de convertir un type de carburant en un nom lisible
   * @param {string} gasType
   * @return {mixed}
   */
  renderGasType = (gasType) => {
    for( let i = 0 ; i < gasTypes.length ; i +=1 ) {
      if ( gasTypes[i].type === gasType) {
        return gasTypes[i].name;
      }
    }

    return (null);
  }

  /**
   * Méthode permettant de générer la liste des prix
   * return {string}
   */
  renderPrices = () => {
    const {
      selectedGasType,
      selectedGasStation,
    } = this.props;

    return (
      <ListGroup variant="flush">
        {selectedGasStation.prices ? selectedGasStation.prices.map(price => {
          return (
            <ListGroup.Item key={price._id} className={selectedGasType === price.gasType ? "selected-gasType" : ""}>
              {`${this.renderGasType(price.gasType)} : ${price.price} € `}
            </ListGroup.Item>            
          );
        }) : (null)}
      </ListGroup>
    )
  }

  render () {
    const {
      showModal,
      hideModal,
      selectedGasStation,
    } = this.props;
  
    return (
      <Modal
        size="xl"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        show={showModal}
        onHide={hideModal}
      >
        <Modal.Header closeButton>
          <Modal.Title>
            {`${selectedGasStation.address} - ${capitalizeFirstLetter(selectedGasStation.city)}`}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.renderPrices()}
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={() => hideModal(true)}>
            <FaWaze size="2em" />
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

GasStation.defaultProps = {
  selectedGasStation: {
    address: null,
    city: null,
    prices: []
  }
};

GasStation.propTypes = {
  selectedGasType: PropTypes.string.isRequired,
  showModal: PropTypes.bool.isRequired,
  hideModal: PropTypes.func.isRequired,
  selectedGasStation: PropTypes.shape({
    address: PropTypes.string,
    city: PropTypes.string,
    prices: PropTypes.array
  }),
};

export default GasStation;