import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog, Switch, Typography} from '@components';
import {useBugReportStore} from '@modules/bugReport/store';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  isVisible: boolean;
  onClose: () => void;
  onReportPress: () => void;
}

export function ShakeReportBottomSheet({
  isVisible,
  onClose,
  onReportPress,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {isShakeEnabled, setShakeEnabled} = useBugReportStore();

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onClose}
      title={t('general.bug_report.shake_title')}
      footer={{
        primaryButton: {
          text: t('general.bug_report.shake_report_button'),
          onPress: onReportPress,
        },
      }}>
      <View style={styles.content}>
        <Typography color={theme.text.neutral.lighter}>
          {t('general.bug_report.shake_description')}
        </Typography>
        <Switch
          title={t('general.bug_report.shake_toggle_label')}
          description={t('general.bug_report.shake_toggle_hint')}
          value={isShakeEnabled}
          onToggle={setShakeEnabled}
        />
      </View>
    </Dialog>
  );
}