import React, { PureComponent } from 'react';
import Modal from 'react-modal'
import '../styles/modal.scss';

class BeerModal extends PureComponent {
  constructor(props: Object) {
  super(props);
  this.state = {
    isOpen: false,
  };
}

open() {
  this.setState({isOpen: true});
}

close() {
  this.setState({isOpen: false});
}

  render() {
    return this.state.isOpen ?
      (
        <Modal
          onRequestClose={() => this.close()}
          className="modal fade"
          // overlayClassName="modal fade beer-modal-overlay"
          contentLabel="Modal"
          shouldCloseOnOverlayClick
          isOpen={this.state.isOpen}
          ariaHideApp={false}
        >
          <div className="row beer-modal">
            <div className="col-12 col-sm-3">
              <img className="beer-modal__img" src={this.props.beer.image_url} alt="beer logo"/>
            </div>
            <div className="col-12 col-sm-9 beer-modal__modal-description modal-description">
              <header>
                <h4>{this.props.beer.name}</h4>
                <h6>{this.props.beer.tagline}</h6>
                <hr className="modal-description__line"></hr>
              </header>
              <div className="modal-description__point-values-container point-values-container">
                <PointValue
                  name="IBU"
                  value={this.props.beer.ibu}
                />
                <PointValue
                  name="ABV"
                  value={this.props.beer.abv}
                />
                <PointValue
                  name="EBC"
                  value={this.props.beer.ebc}
                />
              </div>
              <div className="modal-description__main">
                {this.props.beer.description}
              </div>
              <div className="modal-description__food_pairing food_pairing">
                <p className="food_pairing__title">Best served with:</p>
                {
                  this.props.beer.food_pairing.map((pair, index) => {
                    return <p className="food_pairing__item" key={index}>{pair}</p>
                  })
                }
              </div>
            </div>
          </div>
        </Modal>
      ) :
      null;
  }
}

const PointValue = ({name, value}) => (
 <p className="point-value"><span className="point-value__name">{name}</span>{value}</p>
);


export default BeerModal;