{"version":3,"file":"static/js/312.bfbbd08d.chunk.js","mappings":"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","sources":["views/daftar-alamat/google-maps.js"],"sourcesContent":["import { GoogleMap, MarkerF, useLoadScript } from \"@react-google-maps/api\";\r\nimport { useMemo, useEffect, useState } from \"react\";\r\nimport usePlacesAutocomplete, { getGeocode, getLatLng } from \"use-places-autocomplete\";\r\nimport { Combobox } from \"@headlessui/react\";\r\nimport { useNavigate, useLocation, redirect } from 'react-router-dom'\r\n\r\nconst libraries = ['places']\r\n\r\nconst Maps = () => {\r\n    const navigate = useNavigate()\r\n    const location = useLocation()\r\n    \r\n    const [lat, setLat] = useState(location.state?.latitude ?? 0)\r\n    const [lng, setLng] = useState(location.state?.longitude ?? 0)\r\n    \r\n    \r\n    const { isLoaded } = useLoadScript({\r\n        googleMapsApiKey: 'AIzaSyBHxUVFaT8j2kyhWZRJRraJ-d1z4k5cqlQ',\r\n        libraries\r\n    })\r\n    console.log(location.state);\r\n    const handleMapsNavigation = (e) => {\r\n        var state = {\r\n            latitude: lat,\r\n            longitude: lng,\r\n            location: lat + ',' + lng,\r\n            input:location.state?.input,\r\n            isPin: true,\r\n        }\r\n\r\n        if(location.state?.id) {\r\n            state.id = location.state.id\r\n        }\r\n\r\n        \r\n        if (location.state?.redirect === '/tambah_alamat') {\r\n            navigate('/tambah_alamat', { \r\n                state: {\r\n                    latitude: lat,\r\n                    longitude: lng,\r\n                    location: lat + ',' + lng,\r\n                    input:location.state?.input,\r\n                    isPin: true,\r\n                }\r\n             })\r\n        } else {\r\n            navigate('/tambah_eq', { \r\n                state: {\r\n                    latitude: lat,\r\n                    longitude: lng,\r\n                    location: lat + ',' + lng,\r\n                    input:location.state?.input,\r\n                    isPin: true,\r\n                    activeRadio: location.state?.currentNavigate,\r\n                    redirect: location.state?.redirect\r\n                }\r\n             })\r\n            // console.log(states)\r\n        }\r\n\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <GoogleMapComponent { ...{lat, lng, setLat, setLng, isLoaded } }/>\r\n            <div className='px-4 py-4'>\r\n                <p className='mb-4 mt-2'>Latitude: { lat }<br/> Longitude: { lng }</p>\r\n                <button className='btn btn-login w-100 py-2 text-black' style={{backgroundColor: '#5da18d'}} onClick={ handleMapsNavigation }>Simpan Lokasi</button>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nconst GoogleMapComponent = ({ lat, lng, setLat, setLng, isLoaded }) => {\r\n    const location = useLocation()\r\n    const [center, setCenter] = useState({ lat, lng })\r\n    const [zoom, setZoom] = useState(15)\r\n    const [locationLoaded, setLocationLoaded] = useState(false)\r\n    const markerLocation = useMemo(() => ({ lat, lng }), [lat, lng])\r\n\r\n    const mapContainerStyle = {\r\n        width: '100%',\r\n        height: '78vh'\r\n    }\r\n\r\n    console.log(lat);\r\n    useEffect(() => {\r\n        if(navigator.geolocation && !location.state?.latitude) {\r\n            navigator.geolocation.getCurrentPosition((position) => {\r\n                setCenter({ lat: position.coords.latitude, lng: position.coords.longitude })\r\n                setZoom(15)\r\n                setLat(position.coords.latitude)\r\n                setLng(position.coords.longitude)\r\n                setLocationLoaded(true)\r\n            })\r\n        } else {\r\n            setLocationLoaded(true)\r\n            setZoom(15)\r\n        }\r\n    }, []);\r\n\r\n    const setMapsMarker = (e) => {\r\n        setLat(e.latLng.lat)\r\n        setLng(e.latLng.lng)\r\n    }\r\n\r\n    if(!isLoaded && !locationLoaded) return <div style={{ ...mapContainerStyle, background: '#ccc', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>\r\n\r\n    return isLoaded && locationLoaded && (\r\n        <>\r\n            <PlacesAutoComplete { ...{ setLat, setLng, setCenter } } />\r\n            <GoogleMap \r\n                { ...{ mapContainerStyle, center, zoom } }\r\n                onClick={ setMapsMarker }\r\n                options={{\r\n                    streetViewControl: false,\r\n                    mapTypeControl: false,\r\n                    fullscreenControl: false\r\n                }}\r\n            >\r\n                <MarkerF position={ markerLocation } />\r\n            </GoogleMap>\r\n        </>\r\n    )\r\n}\r\n\r\nconst PlacesAutoComplete = ({ setLat, setLng, setCenter }) => {\r\n    const {\r\n        ready,\r\n        value,\r\n        suggestions: { status, data },\r\n        setValue,\r\n        clearSuggestions\r\n    } = usePlacesAutocomplete()\r\n\r\n    const handlePlaceSelected = (address) => {\r\n        setValue(address)\r\n        clearSuggestions()\r\n\r\n        // get latitude & longitude\r\n        getGeocode({ address })\r\n            .then(results => {\r\n                const { lat, lng } = getLatLng(results[0])\r\n                setLat(lat)\r\n                setLng(lng)\r\n                setCenter({ lat, lng })\r\n            })\r\n    }\r\n\r\n    return (\r\n        <Combobox value={ value } onChange={ handlePlaceSelected }>\r\n            <i className=\"fa fa-search text-primary\" role=\"combobox-icon\"></i>\r\n            <Combobox.Input className=\"combobox-custom\" onChange={ (e) => setValue(e.target.value) } />\r\n            <Combobox.Options>\r\n                { \r\n                    status === 'OK' && (\r\n                        data.map(({ place_id, description }) => (\r\n                            <Combobox.Option key={ place_id } value={ description }>\r\n                                <i className=\"fa fa-map-marker me-3\"></i>\r\n                                { description }\r\n                            </Combobox.Option>\r\n                        ))\r\n                    )\r\n                }\r\n            </Combobox.Options>\r\n        </Combobox>\r\n    )\r\n}\r\n\r\nexport default Maps"],"names":["libraries","GoogleMapComponent","_ref","lat","lng","setLat","setLng","isLoaded","location","useLocation","center","setCenter","useState","zoom","setZoom","locationLoaded","setLocationLoaded","markerLocation","useMemo","mapContainerStyle","width","height","console","log","useEffect","_location$state10","navigator","geolocation","state","latitude","getCurrentPosition","position","coords","longitude","_jsxs","_Fragment","children","_jsx","PlacesAutoComplete","GoogleMap","onClick","e","latLng","options","streetViewControl","mapTypeControl","fullscreenControl","MarkerF","style","background","display","alignItems","justifyContent","_ref2","ready","value","suggestions","status","data","setValue","clearSuggestions","usePlacesAutocomplete","Combobox","onChange","address","getGeocode","then","results","getLatLng","className","role","Input","target","Options","map","_ref3","place_id","description","Option","Maps","_location$state$latit","_location$state","_location$state$longi","_location$state2","navigate","useNavigate","useLoadScript","googleMapsApiKey","backgroundColor","_location$state3","_location$state4","_location$state5","_location$state6","_location$state7","_location$state8","_location$state9","input","isPin","id","redirect","activeRadio","currentNavigate"],"sourceRoot":""}