import React from 'react';
import { Modal, Button, ListGroup } from "react-bootstrap";
import PropTypes from 'prop-types';

class GasStation extends React.Component {
  renderPrices = () => {
    const {
      selectedGasStation,
    } = this.props;

    return (
      <ListGroup variant="flush">
        {selectedGasStation.prices ? selectedGasStation.prices.map(price => {
          return (
            <ListGroup.Item key={price.type}>
              {`${price.type} : ${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} - ${selectedGasStation.city}`}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.renderPrices()}
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={() => hideModal(true)}>
            <img
              className="locationIcon"
              src="/waze.png"
              alt="S'y rendre"
            />
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

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

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

export default GasStation;