import React, {useCallback, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Spinner, WebView, WebViewMessageEvent} from '@components';
import {tokenManager} from '@config/tokens';
import {
  WebViewPdfMessage,
  WebViewPdfMessageType,
} from '@modules/widgets/interfaces';
import {
  downloadWebViewPdf,
  openFilesSequentially,
} from '@modules/widgets/utils';
import {showSnackbar} from '@redux/dispatchers';
import {HUMAND_URL} from '@shared/keys';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function RequestsBanBajio() {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const [loading, setLoading] = useState(true);
  const [pdfLoading, setPdfLoading] = useState(false);
  const refreshToken = tokenManager.getRefreshToken();
  const source = useMemo(
    () => ({uri: `${HUMAND_URL}requests-banbajio-mobile/${refreshToken}`}),
    [refreshToken],
  );

  const onLoadEnd = useCallback(() => setLoading(false), []);

  const onError = useCallback(() => {
    showSnackbar({title: t('errors.api.404')});
  }, [t]);

  const onMessage = async (event: WebViewMessageEvent) => {
    try {
      const message: WebViewPdfMessage = JSON.parse(event.nativeEvent.data);
      if (message.type === WebViewPdfMessageType.PDF_LOADING) {
        setPdfLoading(true);
      }
      if (
        message.type === WebViewPdfMessageType.PDF_GENERATED &&
        message.data
      ) {
        const urls = await downloadWebViewPdf(message.data);
        urls && (await openFilesSequentially(urls, () => setPdfLoading(false)));
      }
    } catch (error) {
      // No need to handle errors, but is required to catch them to avoid component crashed
    }
  };

  return (
    <>
      <WebView
        bounces={false}
        source={source}
        onLoadEnd={onLoadEnd}
        onError={onError}
        onMessage={onMessage}
      />
      {(loading || pdfLoading) && (
        <View
          style={[
            styles.spinner,
            {backgroundColor: theme.background.layout.default},
          ]}>
          <Spinner />
        </View>
      )}
    </>
  );
}

export default RequestsBanBajio;