import React from 'react';
import { Popup } from 'react-leaflet';
import ExtendedMarker from '../../ExtendedMarker';
import createContextProvider from '../../ContextProvider';
import PropTypes from 'prop-types'
import getTranslation from '../../../../i18n/'
import { extractValueFromQuery } from '../helper/extractValueFromQuery'
import leaflet from 'leaflet'
import marker from 'leaflet/dist/images/marker-icon.png';
/**
* Location query popup window
*/
class LocationQuery extends React.Component {
static contextTypes = {
router: PropTypes.object,
};
/**
* Show the report pane with a full report for the queried location
*/
showReport() {
this.props.showReport();
}
render() {
const ContextProvider = createContextProvider(this.context);
const value = (this.props.query.value !== undefined ? extractValueFromQuery(this.props.activeLayer, this.props.query.value, this.props.language) : '');
let noicon = leaflet.icon({
iconUrl: marker,
iconSize: [0,0], // size of the icon
iconAnchor: [0,0], // point of the icon which will correspond to marker's location
popupAnchor: [0,0]
});
return(
<ExtendedMarker icon={noicon} position={[this.props.query.lat, this.props.query.lng]}>
<Popup onClose={this.props.resetLocationQuery}>
<ContextProvider>
<div>
<h3>{getTranslation("webgis.location_query")}</h3>
<div className="geoplasma-popup-content">
<p><strong>{getTranslation("webgis.coordinates")}:</strong> <i className="fa fa-location-arrow" aria-hidden="true"></i> {Math.round(this.props.query.lat * 10000) / 10000+ " - "+ Math.round(this.props.query.lng * 10000) / 10000}</p>
{this.props.report.address &&
<p><strong>{getTranslation("webgis.address")}</strong><br />{this.props.report.address}</p>
}
{value !== false &&
<p><strong>{getTranslation(this.props.activeLayer.key+".label")}:</strong>
{this.props.query.isFetching &&
<p>{getTranslation("webgis.loading")}...</p>
}
{!this.props.query.isFetching &&
<p>
{(value != '-9999' ? value : '-')}
{this.props.activeLayer.unit_of_cell_related_parameter !== 'none' &&
<React.Fragment> {value != '-9999' ? this.props.activeLayer.unit_of_cell_related_parameter : ''}</React.Fragment>
}
</p>
}
</p>
}
{value === false &&
<p>{getTranslation("webgis.outside")}</p>
}
{(value !== false && this.props.query.value !== undefined ) &&
<React.Fragment>
<p>{getTranslation("webgis.locationquery_text")}</p>
<div className="popup-buttons">
<button className="btn btn-green" onClick={() => this.showReport()}>{getTranslation("webgis.standard_report")}</button>
</div>
</React.Fragment>
}
</div>
</div>
</ContextProvider>
</Popup>
</ExtendedMarker>
)
}
}
export default LocationQuery