+import { withFormik } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Col, Form, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { formatTime, parseTime } from '../../helpers/Result';
+import yup from '../../schema/yup';
+
+const ChatSettingsForm = ({
+ dirty,
+ errors,
+ handleBlur,
+ handleChange,
+ handleSubmit,
+ isSubmitting,
+ touched,
+ values,
+}) => {
+ const { t } = useTranslation();
+
+ return <Form noValidate onSubmit={handleSubmit}>
+ <Row>
+ <Form.Group as={Col} md={6} controlId="chatSettings.wait_msgs_min">
+ <Form.Label>{t('twitchBot.chatWaitMsgsMin')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.wait_msgs_min && errors.wait_msgs_min)}
+ name="wait_msgs_min"
+ min="1"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="number"
+ value={values.wait_msgs_min || 1}
+ />
+ </Form.Group>
+ <Form.Group as={Col} md={6} controlId="chatSettings.wait_msgs_max">
+ <Form.Label>{t('twitchBot.chatWaitMsgsMax')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.wait_msgs_max && errors.wait_msgs_max)}
+ name="wait_msgs_max"
+ min="1"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="number"
+ value={values.wait_msgs_max || 10}
+ />
+ </Form.Group>
+ <Form.Group as={Col} md={6} controlId="chatSettings.wait_time_min">
+ <Form.Label>{t('twitchBot.chatWaitTimeMin')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.wait_time_min && errors.wait_time_min)}
+ name="wait_time_min"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.wait_time_min || '0'}
+ />
+ {touched.wait_time_min && errors.wait_time_min ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.wait_time_min)}
+ </Form.Control.Feedback>
+ :
+ <Form.Text muted>
+ {formatTime({ time: parseTime(values.wait_time_min)})}
+ </Form.Text>
+ }
+ </Form.Group>
+ <Form.Group as={Col} md={6} controlId="chatSettings.wait_time_max">
+ <Form.Label>{t('twitchBot.chatWaitTimeMax')}</Form.Label>
+ <Form.Control
+ isInvalid={!!(touched.wait_time_max && errors.wait_time_max)}
+ name="wait_time_max"
+ onBlur={handleBlur}
+ onChange={handleChange}
+ type="text"
+ value={values.wait_time_max || '15:00'}
+ />
+ {touched.wait_time_max && errors.wait_time_max ?
+ <Form.Control.Feedback type="invalid">
+ {t(errors.wait_time_max)}
+ </Form.Control.Feedback>
+ :
+ <Form.Text muted>
+ {formatTime({ time: parseTime(values.wait_time_max)})}
+ </Form.Text>
+ }
+ </Form.Group>
+ </Row>
+ <div className="button-bar mt-3">
+ <Button disabled={!dirty || isSubmitting} type="submit" variant="primary">
+ {t('button.save')}
+ </Button>
+ </div>
+ </Form>;
+};
+
+ChatSettingsForm.propTypes = {
+ dirty: PropTypes.bool,
+ errors: PropTypes.shape({
+ wait_msgs_max: PropTypes.string,
+ wait_msgs_min: PropTypes.string,
+ wait_time_min: PropTypes.string,
+ wait_time_max: PropTypes.string,
+ }),
+ handleBlur: PropTypes.func,
+ handleChange: PropTypes.func,
+ handleSubmit: PropTypes.func,
+ isSubmitting: PropTypes.bool,
+ touched: PropTypes.shape({
+ wait_msgs_max: PropTypes.bool,
+ wait_msgs_min: PropTypes.bool,
+ wait_time_min: PropTypes.bool,
+ wait_time_max: PropTypes.bool,
+ }),
+ values: PropTypes.shape({
+ wait_msgs_max: PropTypes.number,
+ wait_msgs_min: PropTypes.number,
+ wait_time_min: PropTypes.string,
+ wait_time_max: PropTypes.string,
+ }),
+};
+
+export default withFormik({
+ displayName: 'ChatSettingsForm',
+ enableReinitialize: true,
+ handleSubmit: async (values, actions) => {
+ const { onSubmit } = actions.props;
+ await onSubmit({
+ ...values,
+ wait_time_min: parseTime(values.wait_time_min) || 0,
+ wait_time_max: parseTime(values.wait_time_max) || 0,
+ });
+ },
+ mapPropsToValues: ({ channel }) => ({
+ wait_msgs_min: channel.chat_settings.wait_msgs_min || 1,
+ wait_msgs_max: channel.chat_settings.wait_msgs_max || 10,
+ wait_time_min: channel.chat_settings.wait_time_min
+ ? formatTime({ time: channel.chat_settings.wait_time_min }) : '0',
+ wait_time_max: channel.chat_settings.wait_time_max
+ ? formatTime({ time: channel.chat_settings.wait_time_max }) : '15:00',
+ }),
+ validationSchema: yup.object().shape({
+ wait_msgs_min: yup.number().min(1),
+ wait_msgs_max: yup.number().min(1),
+ wait_time_min: yup.string().time(),
+ wait_time_max: yup.string().time(),
+ }),
+})(ChatSettingsForm);