import React from 'react';
import { compose, withProps } from 'recompose';

import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker,
    InfoWindow
} from 'react-google-maps';

import orangeMarker from '../../../assets/img/orange-marker.png';
import './MapWithAMarker.css';

const googleMapURL = process.env.REACT_APP_GOOGLE_MAPS_API_URL;
const loadingElement = <div style={{ height: `100%` }} />;
const containerElement = <div style={{ height: `500px` }} />;
const mapElement = <div style={{ height: `100%` }} />;
const position = { lat: 37.999314, lng: 23.8193796 };
const icon = { url: orangeMarker, scaledSize: { width: 31, height: 50 } };

const MapWithMarkers = compose(
    withProps({
        googleMapURL: googleMapURL,
        loadingElement: loadingElement,
        containerElement: containerElement,
        mapElement: mapElement,
    }),
    withScriptjs,
    withGoogleMap
)(props =>
    <GoogleMap
        defaultZoom={14}
        defaultCenter={position}>
        <MarkerWithInfoWindow position={position} />
    </GoogleMap>
);

class MarkerWithInfoWindow extends React.Component {
    state = {
		isWindowOpen: true
	}

    onToggleOpen = () => {
        this.setState({
            isWindowOpen: !this.state.isWindowOpen
        });
    }

    render() {
        return (<Marker
			position={this.props.position}
			icon={icon}
            onClick={this.onToggleOpen}>
            {this.state.isWindowOpen && <InfoWindow onCloseClick={this.onToggleOpen}>
                <div id="demokritos">
					National Centre of Scientific
					<br></br>Research DEMOKRITOS
				</div>
            </InfoWindow>}
        </Marker>)
    }
}

export default MapWithMarkers;