import React, {useCallback, useState} from 'react';
import {Box, CodeInput, Text, Button} from 'components';
import {useI18n} from '@shopify/react-i18n';
import {useReportDiagnosis} from 'services/ExposureNotificationService';

export interface FormViewProps {
  value: string;
  onChange: (value: string) => void;
  onSuccess: () => void;
  onError: () => void;
}

export const FormView = ({value, onChange, onSuccess, onError}: FormViewProps) => {
  const [i18n] = useI18n();
  const [loading, setLoading] = useState(false);
  const {startSubmission} = useReportDiagnosis();
  const handleVerify = useCallback(async () => {
    setLoading(true);
    try {
      await startSubmission(value);
      setLoading(false);
      onSuccess();
    } catch {
      setLoading(false);
      onError();
    }
  }, [startSubmission, value, onSuccess, onError]);

  return (
    <>
      <Box margin="xxl">
        <Text variant="bodyText" textAlign="center" color="overlayBodyText" accessibilityRole="header">
          {i18n.translate('DataUpload.FormIntro')}
        </Text>
      </Box>
      <Box paddingHorizontal="m" marginBottom="m">
        <CodeInput value={value} onChange={onChange} accessibilityLabel={i18n.translate('DataUpload.InputLabel')} />
      </Box>
      <Box flex={1} paddingHorizontal="m" marginBottom="m">
        <Button
          loading={loading}
          disabled={value.length !== 8}
          variant="bigFlat"
          text={i18n.translate('DataUpload.Action')}
          onPress={handleVerify}
        />
        <Text variant="smallText" color="bodyTextSubdued" textAlign="center" marginTop="s">
          {i18n.translate('DataUpload.InfoSmall')}
        </Text>
      </Box>
    </>
  );
};