import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconAlertTriangle} from '@tabler/icons-react-native';
import {Spinner, Typography, WebView} from '@components';
import {Navigation} from '@interfaces/navigation';
import {useIdpWebSource} from '@modules/widgets/hooks';
import {Screens} from '@shared/constants';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {styles} from './styles';

export function IDP({
  route: {
    params: {id, oauth},
  },
}: Navigation<Screens.IDP>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {webSource, idpLoading} = useIdpWebSource(id, oauth);

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
        idpLoading && styles.spinnerContainer,
      ]}>
      {idpLoading ? (
        <Spinner />
      ) : webSource ? (
        <WebView source={webSource} style={styles.webview} />
      ) : (
        <View style={styles.errorContainer}>
          <IconAlertTriangle
            size={ICON_SIZES.x15}
            color={theme.text.neutral.default}
            style={styles.icon}
          />
          <Typography align="center" weight="semiBold">
            {t('widgets.idp_error')}
          </Typography>
        </View>
      )}
    </View>
  );
}