content: import React from 'react';
  import {Link} from 'react-router';
  import _ from 'lodash';
  import {removeUnwantedNameCharacters} from 'utility/TitleActions';
  import LocationsFilter from './components/LocationsFilter/LocationsFilter';
  import Tappable from 'react-tappable';
  import $ from "jquery";
  import './location-list.less';
  import {addEvent} from 'utility/ga.js';
  import GetDistributorString from 'utility/GetDistributorString';
  
  // import {unsetProductFilter} from 'actions/locationFilterActions';
  
  
  class LocationList extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {};
      this.mobile = $(window).width() <= 480;
    }
  
    componentDidMount() {
      if (_.get(this.props, 'userLocation.denied')) {
        this.openModal('error');
      } 
    }
  
    shouldComponentUpdate(nextProps, nextState) {
      return (!!(nextProps.activeHoveredId && nextProps.activeHoveredId === this.props.activeHoveredId ||
      _.get(nextProps, 'locations.length') !== _.get(this.props, 'locations.length') || 
      _.get(nextProps, 'premiseFilter') !== _.get(this.props, 'premiseFilter') || 
      _.get(nextProps, 'productSearch') !== _.get(this.props, 'productSearch') ||
      _.get(nextProps.ui, 'userLocation.format') !== _.get(this.props.ui, 'userLocation.format') ||
      nextProps.activeLocation !== nextProps.activeLocation) &&
      this.props.shouldUpdate) || nextState.searchOpen !== this.state.searchOpen;
    }
  
    render() {
      let locations = this.props.locations || [];
      locations = _.sortBy(_.map(locations, (location, i) => {
        const distance = location.distanceInMi ? location.distanceInMi : ((location.st_distance * 111195) / 1609.34).toFixed(2);
        return {
          ...location,
          distance
        }
      }), 'distance');
  
      
      const selectedProduct = this.props.productSearch || '';
      return (
        <div className="location-list">
          {
            this.props.deniedGeo ?
            <div className="disabled">
              Your Geo-Location Settings are Disabled
            </div> : null
          }
  
          <div className="location-name">
            Me: <span className="name">{_.startCase(_.get(this.props.ui, 'userLocation.format', ''))}</span>
            <Tappable onTap={this.openModal.bind(this)} className="change-location">(change)</Tappable>
          </div>
  
          <LocationsFilter premiseFilter={this.props.premiseFilter} setPremise={this.props.setPremise.bind(this)} setQuery={this.props.setQuery.bind(this)} openSearch={this.openSearch.bind(this)} searchOpen={this.state.searchOpen} {...this.props} /> 
            <div style={this.props.deniedGeo ? {top: 100} : {}} className={`scrollable-rb scrollable ${this.state.searchOpen ? 'search-open' : ''}`}>
              {
                selectedProduct ? 
                <div className="filtered-product">
                  <p>All locations below carry <span>{selectedProduct}</span>. Press the "×" to reset filter.</p>
                  <div className="clear" onClick={this.resetLocationFilter.bind(this)}>×</div>
                </div> : null
              }
              <span>
              {
                locations.length ?
                  <ul>
                    {
                      _.map(locations, (location, i) => {
                        const distance = location.distanceInMi ? location.distanceInMi : ((location.st_distance * 111195) / 1609.34).toFixed(2);
                        return (
                          <Tappable 
                            key={`${i}-loc`}
                            component="li"
                            onMouseEnter={!this.mobile ? this.hover.bind(this, location, true) : null}
                            onMouseLeave={!this.mobile ? this.hover.bind(this, location, false) : null}
                            onTap={this.setActiveLocation.bind(this, location)}
                            className={`location-item-${i} item ${location.premise} ${_.get(this.props, 'activeLocation', i) === location.id ? 'active' : ''}`}>
                            
                            <div key={`${i}-loc`} className="inner">
                              <div className={`location-type-icon ${location.premise}`}></div>
                              <div className="content">
                                <div className="title">{location.name.replace(/\w+/g, _.capitalize)}</div>
                                <div className="address">{location.street_address_1}, {_.startCase(location.city)}</div>
                                <div className="products-length">{_.get(location, 'products.length')} {_.get(location, 'products.length') === 1 ? 'Product' : 'Products'}</div>
                              </div>
                              <div className="distance">{distance} m.</div>
                            </div>
                          </Tappable>
                        )
                      })
                    }
                  </ul> :
                  <Tappable key={'no-loc'} className="no-locations" onTap={this.openModal.bind(this)}>
                    <h2>There are no locations</h2>
                    <h5>Click here to change your location</h5>
                  </Tappable>
                }
              </span>
            </div>
        </div>
      );
    }
    hover(location, state, e) {
      this.props.setHoveredActive(location, state);
    }
    
    openSearch() {
      addEvent('open_search');
      this.setState({searchOpen: !this.state.searchOpen})
    }
  
    openModal(error) {
      addEvent('open_change_zip_modal');
      this.props.openModalRequested({
        type: 'change-zip',
        data: {
          location: _.get(this.props.userLocation, 'format'),
          error: 'error'
        }
      });
    }
  
    setActiveLocation(location, e) {
      addEvent('click_location', `${location.name} __${location.id}__`);
      this.props.setActiveLocation(location)
    }
  
    resetLocationFilter() {
      addEvent('reset_product_search');
      this.props.queryLocationWithProduct(null)
    }
  }
  
  
  export default LocationList;
  
  //  branch(LocationList, {
  //   cursors: {
  //     selectedProductOwner: ['selectedProductOwner'],
  //     selectedProduct: ['selectedProduct'],
  //     geoLocationSettingsOff: ['geoLocationSettingsOff']
  //   }
  // });
  