import { he } from "date-fns/locale";
import GoogleMapReact from "google-map-react";
const GoogleMapComponent = (props) => {
    const { center, zoom } = props;

    let data = [center];

    const ModelsMap = (map, maps) => {
        //instantiate array that will hold your Json Data
        let dataArray = [];
        //push your Json Data in the array
        {
            data.map((markerJson) => dataArray.push(markerJson));
        }

        //Loop through the dataArray to create a marker per data using the coordinates in the json
        for (let i = 0; i < dataArray.length; i++) {
            let marker = new maps.Marker({
                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
                map,
                label: dataArray[i].id
            });
        }
    };

    // console.log(
    //     "https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
    //         props.center.lng +
    //         "," +
    //         props.center.lat +
    //         "&zoom=12#/"
    // );
    return (
        // <GoogleMapReact
        //     options={function (maps) {
        //         return {
        //             overviewMapControl: true,
        //             mapTypeControl: true,
        //         };
        //     }}
        //     bootstrapURLKeys={{
        //         key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
        //     }}
        //     defaultCenter={center}
        //     defaultZoom={zoom}
        //     yesIWantToUseGoogleMapApiInternals
        //     onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
        // ></GoogleMapReact>
        <>
            {" "}
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <a
                        href={
                            "https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
                            props.center.lng +
                            "," +
                            props.center.lat +
                            "&zoom=7#/"
                        }
                        rel="noreferrer noopener"
                        className="govuk-link govuk-link--no-underline govuk-!-font-size-14 "
                        target="_blank"
                    >
                        See this map on Datamap Wales
                    </a>
                </div>
            </div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <iframe
                        src={
                            "https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
                            props.center.lng +
                            "," +
                            props.center.lat +
                            "&zoom=7#/"
                        }
                        //src={"https://datamap.gov.wales/maps/pedw-dev/embed#/"}
                        width={"100%"}
                        style={{ maxHeight: "400px" }}
                        height={"500px"}
                        className={"mappingFrame"}
                    ></iframe>
                </div>
            </div>
        </>
    );
};

export default GoogleMapComponent;