+import axios from 'axios';
import React from 'react';
+import { Alert, Button, Col, Form, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import toastr from 'toastr';
+
+import ChatSettingsForm from './ChatSettingsForm';
+import ChannelSelect from '../common/ChannelSelect';
+import ToggleSwitch from '../common/ToggleSwitch';
const Controls = () => {
- return <div />;
+ const [channel, setChannel] = React.useState(null);
+ const [chatText, setChatText] = React.useState('');
+
+ const { t } = useTranslation();
+
+ const chat = React.useCallback(async (text, bot_nick) => {
+ try {
+ await axios.post(`/api/channels/${channel.id}/chat`, {
+ text,
+ bot_nick,
+ });
+ toastr.success(t('twitchBot.chatSuccess'));
+ } catch (e) {
+ toastr.error(t('twitchBot.chatError'));
+ }
+ }, [channel, chatText, t]);
+
+ const join = React.useCallback(async (bot_nick) => {
+ try {
+ const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
+ setChannel(rsp.data);
+ toastr.success(t('twitchBot.joinSuccess'));
+ } catch (e) {
+ toastr.error(t('twitchBot.joinError'));
+ }
+ }, [channel, t]);
+
+ const part = React.useCallback(async (bot_nick) => {
+ try {
+ const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
+ setChannel(rsp.data);
+ toastr.success(t('twitchBot.partSuccess'));
+ } catch (e) {
+ toastr.error(t('twitchBot.partError'));
+ }
+ }, [channel, t]);
+
+ const saveChatSettings = React.useCallback(async (values) => {
+ try {
+ const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values);
+ setChannel(rsp.data);
+ toastr.success(t('twitchBot.saveSuccess'));
+ } catch (e) {
+ toastr.error(t('twitchBot.saveError'));
+ }
+ }, [channel, t]);
+
+ return <>
+ <Row className="mb-4">
+ <Form.Group as={Col} md={6}>
+ <Form.Label>{t('twitchBot.channel')}</Form.Label>
+ <Form.Control
+ as={ChannelSelect}
+ joinable
+ manageable
+ onChange={({ channel }) => { setChannel(channel); }}
+ value={channel ? channel.id : ''}
+ />
+ </Form.Group>
+ {channel ? <>
+ <Form.Group as={Col} md={3}>
+ <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
+ <div>
+ <Form.Control
+ as={ToggleSwitch}
+ onChange={({ target: { value } }) => {
+ if (value) {
+ join('localhorsttv');
+ } else {
+ part('localhorsttv');
+ }
+ }}
+ value={channel.join}
+ />
+ </div>
+ </Form.Group>
+ <Form.Group as={Col} md={3}>
+ <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
+ <div>
+ <Form.Control
+ as={ToggleSwitch}
+ onChange={({ target: { value } }) => {
+ if (value) {
+ join('horstiebot');
+ } else {
+ part('horstiebot');
+ }
+ }}
+ value={channel.chat}
+ />
+ </div>
+ </Form.Group>
+ </> : null}
+ </Row>
+ {channel ?
+ <Row>
+ <Form.Group as={Col} md={6}>
+ <Form.Label>{t('twitchBot.chat')}</Form.Label>
+ <Form.Control
+ as="textarea"
+ onChange={({ target: { value } }) => {
+ setChatText(value);
+ }}
+ value={chatText}
+ />
+ <div className="button-bar">
+ <Button
+ className="mt-2"
+ disabled={!chatText || !channel.join}
+ onClick={() => {
+ if (chatText) chat(chatText, 'localhorsttv');
+ }}
+ variant="twitch"
+ >
+ {t('twitchBot.sendApp')}
+ </Button>
+ <Button
+ className="mt-2"
+ disabled={!chatText || !channel.chat}
+ onClick={() => {
+ if (chatText) chat(chatText, 'horstiebot');
+ }}
+ variant="twitch"
+ >
+ {t('twitchBot.sendChat')}
+ </Button>
+ </div>
+ </Form.Group>
+ <Col md={6}>
+ <h3>{t('twitchBot.chatSettings')}</h3>
+ <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
+ </Col>
+ </Row>
+ :
+ <Alert variant="info">
+ {t('twitchBot.selectChannel')}
+ </Alert>
+ }
+ </>;
};
export default Controls;