+import React from 'react';
+import { Container, Navbar } from 'react-bootstrap';
+
+import AutoTracking from './AutoTracking';
+import ToggleIcon from './ToggleIcon';
+import { useTracker } from '../../hooks/tracker';
+
+const mapWild = {
+ map: 'wildMap',
+ compass: 'wildCompass',
+ 'small-key': 'wildSmall',
+ 'big-key': 'wildBig',
+};
+
+const Toolbar = () => {
+ const { config, setConfig } = useTracker();
+
+ const controller = React.useMemo(() => ({
+ getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
+ getDefault: (state, icons) => icons[0],
+ handlePrimary: (state, setState, icons) => {
+ const prop = mapWild[icons[0]];
+ setConfig(c => ({ ...c, [prop]: !c[prop] }));
+ },
+ handleSecondary: () => null,
+ }), [config, setConfig]);
+
+ return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
+ <Container fluid>
+ <div className="button-bar">
+ <ToggleIcon controller={controller} icons={['map']} />
+ <ToggleIcon controller={controller} icons={['compass']} />
+ <ToggleIcon controller={controller} icons={['small-key']} />
+ <ToggleIcon controller={controller} icons={['big-key']} />
+ </div>
+ <AutoTracking />
+ </Container>
+ </Navbar>;
+};
+
+export default Toolbar;