import React, { ReactElement, Suspense } from 'react';
import { EmptyState, TextButton } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { Refresh } from '@wix/wix-ui-icons-common';
import { ErrorBoundary } from '../ErrorBoundary';

const offlineIllustrationPromise = import(
  /* webpackChunkName: "OfflineIllustration" */ './OfflineIllustration'
);

const OfflineIllustrationLazy = React.lazy(async () => ({
  default: (await offlineIllustrationPromise).OfflineIllustration,
}));

export interface OfflineErrorStateProps {
  onRetry: () => void;
  dataHook?: string;
  image?: ReactElement;
}

export function OfflineErrorState(props: OfflineErrorStateProps) {
  const { dataHook, onRetry, image, ...rest } = props;
  const { translate: t } = useWixPatternsContainer();

  return (
    <EmptyState
      theme="page-no-border"
      dataHook={dataHook}
      title={t('cairo.connection.error.title')}
      subtitle={t('cairo.connection.error.text')}
      image={
        image ?? (
          <ErrorBoundary fallback={null}>
            <Suspense fallback={null}>
              <OfflineIllustrationLazy />
            </Suspense>
          </ErrorBoundary>
        )
      }
      {...rest}
    >
      <TextButton
        dataHook="retry-button"
        onClick={onRetry}
        prefixIcon={<Refresh />}
      >
        {t('cairo.error.tryAgain.cta')}
      </TextButton>
    </EmptyState>
  );
}