window.RetailerLocation = React.createClass({

    getInitialState: function () {
        return { collapsed: true }
    },
    toggleAddressVisibility: function(e, location) {
        e.preventDefault();
        var oppositeValue = !this.state.collapsed;
        this.setState({ collapsed: oppositeValue });

        if (!oppositeValue) {
            var ga = window.ga || {};

            function slugify(text) {
                return text.toString().toLowerCase()
                    .replace(/\s+/g, '-')           // Replace spaces with -
                    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
                    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
                    .replace(/^-+/, '')             // Trim - from start of text
                    .replace(/-+$/, '');            // Trim - from end of text
            }

            ga('send', 'pageview', `/Where-to-Buy/list-detail/de/${slugify(location.City)}/${slugify(location.RetailerName)}/${slugify(location.Street)}`);            
        }
    },


    render: function () {
        
        var location = this.props.location;
        return(
				<li className="list-group-item" data-lat={ location.Lat} data-long={ location.Long} id={`retailer-location-${location.Id}`} >
					<div className="location-panel">
						<h3 className="location-name text-uppercase">{ location.RetailerName}</h3>
						<div className="location-info_quick row mtxs">
							<div className="col-xs-8">
								<ul className="list-inline location-area">
									<li className="location-city">{ location.City}</li>
									<li className="location-zipcode">{ location.Zip}</li>
								</ul>
							</div>
							<div className="col-xs-4">
								<ul className="list-inline location-gametypes">

                                    {(location.IsDrawingInstantLocation === true) ? (
                                        <li className="gametypes-drawing-instant">
                                            <span className="sr-only">Drawing/Instant Games</span>
                                            <i className="fa fa-circle icn color-primary" data-toggle="tooltip" data-placement="top" title="Drawing/Instant Games" aria-hidden="true"></i>
                                        </li>
                                    ):(
                                        <li className="gametypes-drawing-instant">
                                            <i className="fa fa-circle icn color-gray_light" aria-hidden="true"></i>
                                        </li>
                                    )}

								    {(location.IsSportsLottoLocation === true) ?
								    (
										<li className="gametypes-sports">
											<span className="sr-only">Sports Lottery</span>
											<i className="fa fa-circle icn color-secondary" data-toggle="tooltip" data-placement="top" title="Sports Lottery" aria-hidden="true"></i>
										</li>
								    ):(
										<li className="gametypes-sports">
											<i className="fa fa-circle icn color-gray_light" aria-hidden="true"></i>
										</li>
								    )}

								    {(location.IsKenoLocation === true) ?
								    (
										<li className="gametypes-keno">
											<span className="sr-only">Keno<sup>&reg;</sup></span>
											<i className="fa fa-circle icn color-keno" data-toggle="tooltip" data-placement="top" title="Keno©" aria-hidden="true"></i>
										</li>
                                    ):(
										<li className="gametypes-keno">
											<i className="fa fa-circle icn color-gray_light" aria-hidden="true"></i>
										</li>
                                    )}

								</ul>
							</div>
						</div>

                        <a href="#" role="button" data-toggle="collapse" aria-expanded="false" onClick={(event) => this.toggleAddressVisibility(event,location)}>
							<span className="sr-only">More Info</span>
							<i className="fa fa-info-circle icn" aria-hidden="true"></i>
						</a>
					</div>
                    {(this.state.collapsed !== true)?(
					    <div className="collapse in">
						    <div className="location-info_full">
							    <div className="row">
								    <div className="col-xs-7">
									    <div itemScope itemType="http://schema.org/Organization">
										    <h3 className="location-name text-uppercase visible-xs-block" itemProp="name">{ location.RetailerName}</h3>
										    <div itemProp="address" itemScope itemType="http://schema.org/PostalAddress">
											    <span itemProp="streetAddress">{ location.Street }</span><br />
											    <span itemProp="addressLocality">{ location.City }</span>, <span itemProp="addressRegion">DE</span> <span itemProp="postalCode">{ location.Zip }</span>
										    </div>
										    <ul className="list-unstyled mbn">
											    <li className="mbxs"><a href={`https://maps.google.com?daddr=${location.Street} ${location.City} DE ${location.Zip}`} target="_blank" ><i className="fa-fw fa fa-map-o"></i> Directions</a></li>
												{(location.Phone) ?
												(
													<li><i className="fa-fw fa fa-mobile"></i><span itemProp="telephone"> { location.Phone} </span></li>
                                                    ) : (null)}
										        {(location.Distance) ?
										        (
                                                    <li><i className="fa-fw fa"></i><span itemProp="distance"> {Math.round(location.Distance * 10) / 10} miles away </span></li>
										        ) : (null)}
										    </ul>
									    </div>
								    </div>
								    <div className="col-xs-5">
									    <ul className="list-unstyled location-gametypes">
									        {(location.IsDrawingInstantLocation === true) ?
									        (
											    <li className="gametypes-drawing-instant mbxs">
												    <i className="fa fa-circle icn color-primary mrxs" aria-hidden="true"></i>
												    <span>Drawing/Instant</span>
											    </li>
									        ):(null)}

									        {(location.IsSportsLottoLocation === true) ?
									        (
											    <li className="gametypes-sports mbxs">
												    <i className="fa fa-circle icn color-secondary mrxs" aria-hidden="true"></i>
												    <span>Sports</span>
											    </li>
									        ):(null)}

                                            {(location.IsKenoLocation === true) ?
									        (
											    <li className="gametypes-keno mbxs">
												    <i className="fa fa-circle icn color-keno mrxs" aria-hidden="true"></i>
												    <span>Keno<sup>&reg;</sup></span>
											    </li>
									        ):(null)}
									    </ul>
								    </div>
							    </div>
						    </div>
					    </div>                    
                    ):(null)}

				</li>
            );
    }
});