import { Paragraph } from '@/components/Typography';
import React, { useCallback } from 'react';
import { Switch } from 'react-native-gesture-handler';
import { t } from '@/localisation';
import { useAppDispatch, useTypedSelector } from '@/store';
import { setEnablePlaybackReporting } from '@/store/settings/actions';
import Container from '../components/Container';
import { SwitchContainer, SwitchLabel } from '../components/Switch';

export default function PlaybackReporting() {
    const isEnabled = useTypedSelector((state) => state.settings.enablePlaybackReporting);
    const dispatch = useAppDispatch();

    const toggleSwitch = useCallback(() => {
        dispatch(setEnablePlaybackReporting(!isEnabled));
    }, [isEnabled, dispatch]);

    return (
        <Container>
            <Paragraph>{t('playback-reporting-description')}</Paragraph>
            <SwitchContainer>
                <SwitchLabel>{t('playback-reporting')}</SwitchLabel>
                <Switch value={isEnabled} onValueChange={toggleSwitch} />
            </SwitchContainer>
        </Container>
    );
}