content: import styles from './ScrollableContainer.less';
  import theme from './theme.less';
  
  import React, { Component } from 'react';
  import Modal from 'react-modal';
  import Autosuggest from 'Autosuggest';
  import countries from './countries';
  import { escapeRegexCharacters } from 'utils/utils';
  
  const getSuggestions = value => {
    const escapedValue = escapeRegexCharacters(value.trim());
  
    if (escapedValue === '') {
      return countries;
    }
  
    const regex = new RegExp('^' + escapedValue, 'i');
  
    return countries.filter(country => regex.test(country.name));
  };
  
  const getSuggestionValue = suggestion => suggestion.name;
  
  const renderSuggestion = suggestion => suggestion.name;
  
  const modalStyle = {
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: '#fff',
      fontFamily: '"Open Sans", sans-serif'
    },
    content: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      border: 0,
      padding: 0,
      overflow: 'hidden',
      outline: 'none',
      height: '100%'
    }
  };
  
  export default class ScrollableContainer extends Component {
    constructor() {
      super();
  
      this.state = {
        isModalOpen: false,
        selected: countries.filter(country => country.name === 'Australia')[0],
        value: '',
        suggestions: countries
      };
    }
  
    openModal = () => {
      this.setState({
        isModalOpen: true,
        value: '',
        suggestions: countries
      });
    };
  
    closeModal = () => {
      this.setState({
        isModalOpen: false
      });
    };
  
    onChange = (event, { newValue }) => {
      this.setState({
        value: newValue
      });
    };
  
    onSuggestionsFetchRequested = ({ value }) => {
      this.setState({
        suggestions: getSuggestions(value)
      });
    };
  
    onSuggestionSelected = (event, { suggestion }) => {
      this.setState({
        isModalOpen: false,
        selected: suggestion
      });
    };
  
    render() {
      const { isModalOpen, selected, value, suggestions } = this.state;
      const inputProps = {
        placeholder: 'Type to filter',
        value,
        onChange: this.onChange
      };
  
      return (
        <div id="scrollable-container-example" className={styles.container}>
          <div className={styles.textContainer}>
            <div className={styles.title}>Scrollable container</div>
            <div className={styles.description}>
              When the suggestions list is long, you may want to make it
              scrollable. Note that the suggestions are rendered even when the
              input field is not focused.
            </div>
          </div>
          <div className={styles.demoContainer}>
            <div className={styles.question}>Where do you live?</div>
            <div className={styles.answer}>{selected.name}</div>
            <button className={styles.editButton} onClick={this.openModal}>
              Edit
            </button>
          </div>
          <Modal
            isOpen={isModalOpen}
            contentLabel="Modal"
            onRequestClose={this.closeModal}
            shouldCloseOnOverlayClick={false}
            closeTimeoutMS={
              1 /* otherwise the modal is not closed when suggestion is selected by pressing Enter */
            }
            style={modalStyle}
          >
            <div className={styles.modalTitle}>Please select a country:</div>
            <div className={styles.modalBody}>
              <Autosuggest
                suggestions={suggestions}
                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                onSuggestionSelected={this.onSuggestionSelected}
                getSuggestionValue={getSuggestionValue}
                renderSuggestion={renderSuggestion}
                inputProps={inputProps}
                alwaysRenderSuggestions={true}
                theme={theme}
                id="scrollable-container-example"
              />
            </div>
            <button className={styles.cancelButton} onClick={this.closeModal}>
              Cancel
            </button>
          </Modal>
        </div>
      );
    }
  }
  