+import PropTypes from 'prop-types';
+import React from 'react';
+import { Col, Form, Modal, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import LargeCheck from '../common/LargeCheck';
+import { useTracker } from '../../hooks/tracker';
+
+const ConfigDialog = ({
+ onHide,
+ show,
+}) => {
+ const { config, saveConfig } = useTracker();
+ const { t } = useTranslation();
+
+ const handleChange = React.useCallback(({ target: { name, value } }) => {
+ saveConfig({ [name]: value });
+ }, [saveConfig]);
+
+ return <Modal className="tracker-config-dialog" onHide={onHide} show={show} size="lg">
+ <Modal.Header closeButton>
+ <Modal.Title>
+ {t('tracker.config.title')}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <Row>
+ <Col sm={6}>
+ <h3>{t('tracker.config.wildItems')}</h3>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.wildMap"
+ >
+ <Form.Label>{t('tracker.config.wildMap')}</Form.Label>
+ <Form.Control
+ as={LargeCheck}
+ name="wildMap"
+ onChange={handleChange}
+ value={!!config.wildMap}
+ />
+ </Form.Group>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.wildCompass"
+ >
+ <Form.Label>{t('tracker.config.wildCompass')}</Form.Label>
+ <Form.Control
+ as={LargeCheck}
+ name="wildCompass"
+ onChange={handleChange}
+ value={!!config.wildCompass}
+ />
+ </Form.Group>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.wildSmall"
+ >
+ <Form.Label>{t('tracker.config.wildSmall')}</Form.Label>
+ <Form.Control
+ as={LargeCheck}
+ name="wildSmall"
+ onChange={handleChange}
+ value={!!config.wildSmall}
+ />
+ </Form.Group>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.wildBig"
+ >
+ <Form.Label>{t('tracker.config.wildBig')}</Form.Label>
+ <Form.Control
+ as={LargeCheck}
+ name="wildBig"
+ onChange={handleChange}
+ value={!!config.wildBig}
+ />
+ </Form.Group>
+ </Col>
+ <Col sm={6}>
+ <h3>{t('tracker.config.showItems')}</h3>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.showMap"
+ >
+ <Form.Label>{t('tracker.config.showMap')}</Form.Label>
+ <Form.Select
+ className="w-auto"
+ name="showMap"
+ onChange={handleChange}
+ value={config.showMap || 'always'}
+ >
+ <option value="never">
+ {t('tracker.config.showItemOptions.never')}
+ </option>
+ <option value="situational">
+ {t('tracker.config.showItemOptions.situational')}
+ </option>
+ <option value="always">
+ {t('tracker.config.showItemOptions.always')}
+ </option>
+ </Form.Select>
+ </Form.Group>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.showCompass"
+ >
+ <Form.Label>{t('tracker.config.showCompass')}</Form.Label>
+ <Form.Select
+ className="w-auto"
+ name="showCompass"
+ onChange={handleChange}
+ value={config.showCompass || 'always'}
+ >
+ <option value="never">
+ {t('tracker.config.showItemOptions.never')}
+ </option>
+ <option value="situational">
+ {t('tracker.config.showItemOptions.situational')}
+ </option>
+ <option value="always">
+ {t('tracker.config.showItemOptions.always')}
+ </option>
+ </Form.Select>
+ </Form.Group>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.showSmall"
+ >
+ <Form.Label>{t('tracker.config.showSmall')}</Form.Label>
+ <Form.Select
+ className="w-auto"
+ name="showSmall"
+ onChange={handleChange}
+ value={config.showSmall || 'always'}
+ >
+ <option value="never">
+ {t('tracker.config.showItemOptions.never')}
+ </option>
+ <option value="situational">
+ {t('tracker.config.showItemOptions.situational')}
+ </option>
+ <option value="always">
+ {t('tracker.config.showItemOptions.always')}
+ </option>
+ </Form.Select>
+ </Form.Group>
+ <Form.Group
+ className="d-flex justify-content-between my-2"
+ controlId="tracker.showBig"
+ >
+ <Form.Label>{t('tracker.config.showBig')}</Form.Label>
+ <Form.Select
+ className="w-auto"
+ name="showBig"
+ onChange={handleChange}
+ value={config.showBig || 'always'}
+ >
+ <option value="never">
+ {t('tracker.config.showItemOptions.never')}
+ </option>
+ <option value="situational">
+ {t('tracker.config.showItemOptions.situational')}
+ </option>
+ <option value="always">
+ {t('tracker.config.showItemOptions.always')}
+ </option>
+ </Form.Select>
+ </Form.Group>
+ </Col>
+ </Row>
+ </Modal.Body>
+ </Modal>;
+};
+
+ConfigDialog.propTypes = {
+ onHide: PropTypes.func,
+ show: PropTypes.bool,
+};
+
+export default ConfigDialog;