import React from 'react';
import PropTypes from 'prop-types';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

/**
 * A stateless component which renders Goggle Map. It can accept all standard attributes and events.
 */
const DesktopGoogleMapView = props => {

    return (

        <div>
            <div className='jp-desktop-google-map-view'>
                <div className='jp-desktop-google-map' role='presentation' onKeyDown={props.onKeyDownDesktopViewMap} onClick={props.onClickDesktopViewMap}>
                    {props.MapVisible ?
                        (<Map
                            google={window.google}
                            zoom={11}
                            style={{width: props.mapWidth, height: props.mapHeight}}
                            initialCenter={{
                                lat: 19.0760,
                                lng: 72.8777
                            }}
                        >
                            {
                                props.markerArr.map((marker, index) => (
                                    <Marker
                                        key={index}
                                        onClick={props.onMarkerClick}
                                        name={marker.name}
                                        text={marker.text}
                                        icon={{
                                            url: marker.url,
                                            scaledSize: new window.google.maps.Size(marker.size[0], marker.size[1])
                                        }}
                                        position={{
                                            lat: marker.lat,
                                            lng: marker.long
                                        }}
                                    />)
                                )
                            }
                            {props.isInfoWindowVisible ?
                                <InfoWindow
                                    marker={props.marker.marker}
                                    visible={props.marker.visible}
                                >
                                    <div>
                                        <h1>{props.marker.name}</h1>
                                    </div>
                                </InfoWindow> : null}
                        </Map>) : null}

                </div>
            </div>

        </div>
    );
};


export default GoogleApiWrapper(
    (props) => ({
        apiKey: props.apiKey,
    }
    ))(DesktopGoogleMapView);

DesktopGoogleMapView.propTypes = {
    /** Event to be triggered on click */
    onMarkerClick: PropTypes.func,
    /** Custom Marker name which will be added to the Google Map*/
    name: PropTypes.string,
    /** Custom Marker text which will be added to the Google Map*/
    text: PropTypes.string,
    /** Custom Marker object which will be Displayed the Info Windows */
    marker: PropTypes.object,
    /** Custom Marker object which will be added to the Info Windows */
    markerArr: PropTypes.array,
    /** property to make Info Window enable and Disable in Google Map  */
    visible: PropTypes.bool,
    /**property to configured the colour of Mrker in Google Map */
    url: PropTypes.object,
    /** Custom Marker object which will be provide the Styled to Google Map */
    icon: PropTypes.object,
    /** Added to handle KeyDown event if required */
    onKeyDownDesktopViewMap: PropTypes.func,
    /** OnClick function to toggle of display of Google Map */
    onClickDesktopViewMap: PropTypes.func,
    /** flag to maitain the visibility of Google Map */
    MapVisible: PropTypes.bool,
    /** flag to maitain the visibility of Info window */
    isInfoWindowVisible: PropTypes.bool,
    /** Width of Map */
    mapWidth: PropTypes.string,
    /** Height of Map */
    mapHeight: PropTypes.string
};

DesktopGoogleMapView.defaultProps = {
    name: '',
    text: '',
    visible: true,
    isInfoWindowVisible: true
};