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 MobileGoogleMapView = props => {

    return (

        <div>
            <div className={'jp-mobile-google-map-view ' + props.parentClassName} role='presentation' onClick={props.onClickViewMap} />
            <div className='jp-mobile-google-map'>
                {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>
    );
};


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

MobileGoogleMapView.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 Marker for Google Map  */
    url: PropTypes.string,
    /** Custom Marker object which will be provide the Styled to Google Map */
    icon: PropTypes.string,
    /** OnClick function redirect to Google Map */
    onClickViewMap: 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.isRequired,
    /** Height of Map */
    mapHeight: PropTypes.string.isRequired,
    /* Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
};

MobileGoogleMapView.defaultProps = {
    /** Custom Marker name which will be added to the Google Map */
    name: '',
    /** Custom Marker text which will be added to the Google Map */
    text: '',
    /** property to configured the colour of Mrker in Google Map  */
    url: '',
    /** Custom Marker object which will be provide the Styled to Google Map */
    icon: '',
    /** Width of Map */
    mapWidth: '360px',
    /** Height of Map */
    mapHeight: '640px',
    /** flag to maitain the visibility of Google Map */
    MapVisible: false,
    /** flag to maitain the visibility of Info window */
    isInfoWindowVisible: false,
    /** property to make Info Window enable and Disable in Google Map  */
    visible: true,
    /** Custom Marker object which will be added to the Info Windows */
    markerArr: [],
    /* Class applied to parent container for additional styling  */
    parentClassName: '',
};