import React, {useCallback, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Spinner, WebView} from '@components';
import {tokenManager} from '@config/tokens';
import {showSnackbar} from '@redux/dispatchers';
import {HUMAND_URL} from '@shared/keys';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function AcknoledgmentsNemak() {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const [loading, setLoading] = useState(true);
  const refreshToken = tokenManager.getRefreshToken();
  const source = useMemo(
    () => ({uri: `${HUMAND_URL}recognitions-nemak-mobile/${refreshToken}`}),
    [refreshToken],
  );

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

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

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

export default AcknoledgmentsNemak;