import React, {useCallback, useLayoutEffect, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {FormProvider} from 'react-hook-form';
import {useNavigation} from '@react-navigation/native';
import {useNetInfo} from '@react-native-community/netinfo';
import {IconSettings} from '@tabler/icons-react-native';
import {Dialog, DismissKeyboard, Switch, IconButton} from '@components';
import {useReportBugForm} from '@modules/bugReport/hooks/useReportBugForm';
import {useBugReportStore} from '@modules/bugReport/store';
import {ReportForm} from '@modules/bugReport/components/ReportForm';
import {ReportResult} from '@modules/bugReport/components/ReportResult';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';

function ReportBug() {
  const navigation = useNavigation();
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {isInternetReachable} = useNetInfo();
  const isOffline = isInternetReachable === false;
  const {isShakeEnabled, setShakeEnabled} = useBugReportStore();
  const [isSettingsVisible, setIsSettingsVisible] = useState(false);

  const onOpenSettings = useCallback(() => {
    setIsSettingsVisible(true);
  }, []);

  const onCloseSettings = useCallback(() => {
    setIsSettingsVisible(false);
  }, []);

  const {
    files,
    reportState,
    remainingAttachments,
    canAddFiles,
    minDescriptionLength,
    maxDescriptionLength,
    maxAttachments,
    onPickFiles,
    onDeleteFile,
    onSubmit,
    onRetry,
    methods,
  } = useReportBugForm();

  const onGoBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  const isFormView =
    reportState.status === 'idle' || reportState.status === 'submitting';

  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: isFormView
        ? () => (
            <IconButton
              Icon={IconSettings}
              onPress={onOpenSettings}
              variant="tertiary"
            />
          )
        : undefined,
    });
  }, [navigation, onOpenSettings, isFormView]);

  return (
    <View
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.layout.default},
      ]}>
      {isFormView ? (
        <DismissKeyboard style={commonStyles.flex}>
          <FormProvider {...methods}>
            <ReportForm
              minDescriptionLength={minDescriptionLength}
              maxDescriptionLength={maxDescriptionLength}
              maxAttachments={maxAttachments}
              files={files}
              remainingAttachments={remainingAttachments}
              canAddFiles={canAddFiles}
              isSubmitting={reportState.status === 'submitting'}
              isOffline={isOffline}
              onPickFiles={onPickFiles}
              onDeleteFile={onDeleteFile}
              onSubmit={onSubmit}
            />
          </FormProvider>
        </DismissKeyboard>
      ) : (
        <ReportResult
          variant={reportState.status === 'success' ? 'success' : 'error'}
          onPressOk={onGoBack}
          onRetry={onRetry}
          onCancel={onGoBack}
        />
      )}
      <Dialog
        isVisible={isSettingsVisible}
        onClose={onCloseSettings}
        title={t('general.settings')}>
        <Switch
          title={t('general.bug_report.shake_toggle_label')}
          description={t('general.bug_report.shake_toggle_hint')}
          value={isShakeEnabled}
          onToggle={setShakeEnabled}
        />
      </Dialog>
    </View>
  );
}

export default ReportBug;