import React, { useState, useEffect } from 'react';
import { Button, makeStyles } from '@material-ui/core';
import { FreeFormField } from './FreeFormField';
import { FluentButton } from '../../UI/inputs/buttons/FluentButton';
import { fromLonLat } from 'ol/proj';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    button: {
        marginTop: theme.spacing(1)
    }
}));
// @todo: build out address options
const GeoLocation = (props) => {
    const [city, setCity] = useState('');
    const [state, setState] = useState('');
    const [zip, setZip] = useState('');
    const [country, setCountry] = useState('');
    const [house, setHouse] = useState('');
    const [address1, setAddress1] = useState('');
    const [address2, setAddress2] = useState('');
    const [response, setResponse] = useState('{}');
    const [coordinates, setCoordinates] = useState([-117.29982, 33.054275]);
    const { sendSelected, center } = props;
    const debug = true;
    async function geocode(address) {
        let formattedAddress = address.split(' ').join('+');
        formattedAddress = formattedAddress.split('\n').join('+');
        console.log('FORMATTED ADDRESS', formattedAddress);
        const url = `https://geocoder.say.rocks/?address=${formattedAddress}&debug=${debug}`;
        try {
            const response = await fetch(url, {});
            if (!response.ok) {
                throw new Error(response.statusText);
            }
            const json = await response.json();
            const { house_number, country, house, road, city, state, unit, postcode } = json;
            setAddress1(`${house_number} ${road}`);
            setAddress2(`${unit}`);
            setHouse(house);
            setCity(city);
            setState(state);
            setZip(postcode);
            setCountry(country);
            setResponse(JSON.stringify(json, null, 2));
        }
        catch (err) {
            console.log(`Node: ${err}`);
        }
    }
    async function getPoints(address) {
        const url = `http://dev.virtualearth.net/REST/v1/Locations/US/${house}%20${address1},%20${city},%20${state}?o=json&key=AuLp5uwpaqURqvvQt3hd8V5YDYx2yCWSUZuuHHhgwR5PYW8vlOT7Zh__eC-Su9rA`;
        try {
            const response = await fetch(url, {});
            if (!response.ok) {
                throw new Error(response.statusText);
            }
            const json = await response.json();
            console.log('BING RESPONSE: ', json.resourceSets[0].resources[0].geocodePoints[0].coordinates);
            setCoordinates(json.resourceSets[0].resources[0].geocodePoints[0].coordinates);
            sendSelected(fromLonLat(json.resourceSets[0].resources[0].geocodePoints[0].coordinates.reverse()));
        }
        catch (err) {
            console.log(`Node: ${err}`);
        }
    }
    useEffect(() => {
        const listener = (event) => {
            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                console.log('Enter key was pressed.', event);
                getPoints();
            }
        };
        document.addEventListener('keydown', listener);
        return () => {
            document.removeEventListener('keydown', listener);
        };
    }, [center]);
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement(FreeFormField, { didUpdateText: (text) => {
            if (text.length) {
                geocode(text);
            }
            else {
                // setHouse("");
                setAddress1('');
                setAddress2('');
                setCity('');
                setState('');
                setZip('');
                setCountry('');
                setResponse('{}');
            }
        } }), React.createElement(FluentButton, { className: classes.button, size: "small", onClick: getPoints }, "G")));
};
export default GeoLocation;
//# sourceMappingURL=GeoLocation.js.map