import React from 'react';
import { makeStyles, FormControl, Input, InputAdornment } from '@material-ui/core';
import clsx from 'clsx';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { POIIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    lat: {
        marginRight: theme.spacing(2)
    }
}));
const Position = (props) => {
    const classes = useStyles();
    const { changeLat, changeLong, value, setPosition } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.lat }, React.createElement(FormControl, { className: clsx(classes.margin, classes.withoutLabel, classes.textField) }, React.createElement(Input, { id: "longitude", value: value, onChange: changeLong, endAdornment: React.createElement(InputAdornment, { position: "end" }, "Long"), "aria-describedby": "longitude-input", inputProps: {
            'aria-label': 'longitude-input'
        } }))), React.createElement("div", null, React.createElement(FormControl, { className: clsx(classes.margin, classes.withoutLabel, classes.textField) }, React.createElement(Input, { id: "latitude", value: value, onChange: changeLat, endAdornment: React.createElement(InputAdornment, { position: "end" }, "Lat"), "aria-describedby": "latitude-input", inputProps: {
            'aria-label': 'latitude-input'
        } }))), React.createElement("div", null, React.createElement(FluentIconButton, { onClick: setPosition, color: "primary", icon: POIIcon }))));
};
export default Position;
//# sourceMappingURL=Position.js.map