import React, { useMemo } from 'react';
import { components, hooks, constants } from '@spglobal/ca-mfe-package-utils';
import BackwardForwardButton from '@components/BackwardForwardButton';
import { InlineNotification, NotificationType } from '@spglobal/react-components';
import { rgWidgetMfe } from '@root/constants';
import LoadingSkeleton from '@components/GenerateScore/LoadingSkeleton';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { generatedScoreSelector } from '@root/store/generateScore/generateScore.selector';

const { ErrorBoundary } = components;

/**
 * local development url 'http://localhost:9193/remoteEntry.js'
 */
const RGWidgetMfe = props => {
  const { t } = useTranslation();
  const { riskGaugeData } = useSelector(generatedScoreSelector);

  const { Component: FederatedComponent, errorLoading } = hooks.useFederatedComponent(
    constants.endpoints.CDNPATH + rgWidgetMfe,
    'rgWidget',
    './rgIndex'
  );

  const rgHasData = useMemo(() => riskGaugeData && Object.keys(riskGaugeData).length > 0, [riskGaugeData]);

  return (
    <>
      {
        props.isServiceError ? (
          <div className='spg-text spg-text-large spg-text-center'>
            {t('scoringui:noDataAvailable')}
          </div>
        ) : (
          <React.Suspense fallback={<LoadingSkeleton />}>
            {errorLoading ? (
              <InlineNotification type={NotificationType.ERROR} isOpen={true}>
                {'Error loading module rgWidget'}
              </InlineNotification>
            ) : (
              FederatedComponent && (
                <ErrorBoundary componentName="rgWidget">
                  <FederatedComponent {...props} />
                </ErrorBoundary>
              )
            )}
          </React.Suspense>
        )
      }

      <div className="spg-col">
        <BackwardForwardButton isRequired={true} disablePropUpload={(props.isRgWidgetLoading || !Boolean(rgHasData))} />
      </div>
    </>
  );
};

export default React.memo(RGWidgetMfe);