import React from 'react'
import GoogleMap from 'google-map-react'
import {Link} from 'react-router-dom'

// ViewStoresMap component is where map with stores is rendered
const SearchStoresOnMap = props => (
  <div>
    <form className='row underline'>
      <div className='row'>
        <div className='three columns'>
          <label>Miasta alfabetycznie:</label>
          <select
            className='u-full-width'
            id='alphabet'
            autoFocus='all'
            defaultValue='all'
            onChange={props.handleAlphabetLetter}
            >
            <option value='all'>Nie wybrano</option>
            <option value='A'>A</option>
            <option value='B'>B</option>
            <option value='C'>C</option>
            <option value='D'>D</option>
            <option value='E'>E</option>
            <option value='F'>F</option>
            <option value='G'>G</option>
            <option value='H'>H</option>
            <option value='I'>I</option>
            <option value='J'>J</option>
            <option value='K'>K</option>
            <option value='L'>L</option>
            <option value='M'>M</option>
            <option value='N'>N</option>
            <option value='O'>O</option>
            <option value='P'>P</option>
            <option value='R'>R</option>
            <option value='S'>S</option>
            <option value='T'>T</option>
            <option value='U'>U</option>
            <option value='W'>W</option>
            <option value='X'>X</option>
            <option value='Y'>Y</option>
            <option value='Z'>Z</option>
          </select>
        </div>
        <div className='four columns'>
          <label>Miasto lub miejscowosc: </label>
          <select
            className='u-full-width'
            id='selectCityName'
            autoFocus='none'
            defaultValue='none'
            onChange={props.handleCityName}
            >
            <option value='none'>Wszystkie</option>
            <option value='BBB'>BBB</option>
            <option value='CCC'>CCC</option>
            <option value='DDD'>DDD</option>
            <option value='EEE'>EEE</option>
            <option value='FFF'>FFF</option>
          </select>
        </div>
        <div className='five columns'>
          <label>Nazwa ulicy:</label>
          <select
            className='u-full-width'
            id='selectStreetName'
            autoFocus='none'
            defaultValue='none'
            onChange={props.handleStreetName}
            >
            <option value='none'>Wszystkie</option>
              <option value='BBB'>BBB</option>
              <option value='CCC'>CCC</option>
              <option value='DDD'>DDD</option>
              <option value='EEE'>EEE</option>
              <option value='FFF'>FFF</option>
          </select>
        </div>
        <div className='three columns'>
        </div>
      </div>
    </form>
  </div>
)
SearchStoresOnMap.propsTypes = {
  handleAlphabetLetter: React.PropTypes.func.isRequired,
  handleCityName: React.PropTypes.func.isRequired,
  handleStreetName: React.PropTypes.func.isRequired
}

const ViewStoresMap = props => {
  scroll(0, 0)
  return (
    <div>
      <div className='row'>
        <div className='columns center-text view-separator'>
          <h5><b>Mapa Sklepow</b></h5>
        </div>
      </div>
      <SearchStoresOnMap
        handleAlphabetLetter={props.handleAlphabetLetter}
        handleCityName={props.handleCityName}
        handleStreetName={props.handleStreetName}
        />
      <div>
        <div className='row view-separator'>
          <div className='columns'>
            <div className='view-map'>
              <GoogleMap
                bootstrapURLKeys={{key: 'AIzaSyAMK_YroYmfcz_5YJifD_14uEobOtrUT4c'}}
                center={props.userLocalization}
                defaultZoom={10}
                zoom={props.zoom}
                >
                {props.stores.map(store =>
                  <div
                    key={store.id + 'map'}
                    className='store-icon-container'
                    lat={store.localization.centerCoord[0]}
                    lng={store.localization.centerCoord[1]}
                    >
                    <Link
                      className='button collored in-line'
                      to={{pathname: '/sklepmap', search: 'id='+store.id}}
                      >{store.storeName}</Link>
                  </div>
                )}
              </GoogleMap>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
ViewStoresMap.propTypes = {
  stores: React.PropTypes.array.isRequired,
  userLocalization: React.PropTypes.array.isRequired,
  toggleMapBtnText: React.PropTypes.string.isRequired,
  handlePromoMount: React.PropTypes.func.isRequired,
  handleAlphabetLetter: React.PropTypes.func.isRequired
}

// --- --- --- --- --- ---

export {ViewStoresMap}
