import React from 'react';
import { observer } from 'mobx-react-lite';
import { EntityPageProps } from './EntityPage';
import { EntityPagePlain } from './EntityPagePlain';
import { FieldValues } from 'react-hook-form';
import { PageErrorState } from '../PageErrorState';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface EntityPageWrapperProps<T, V extends FieldValues = FieldValues>
  extends EntityPageProps<T, V> {}

function _EntityPageWrapper<T, V extends FieldValues = FieldValues>({
  state,
  ...rest
}: EntityPageWrapperProps<T, V>) {
  const { translate: t } = useWixPatternsContainer();

  if (state.initTask.status.isError) {
    return (
      <PageErrorState
        title={t('cairo.page.loadError.failedState.title')}
        subtitle={t('cairo.page.loadError.failedState.description')}
        retryText={t('cairo.page.loadError.failedState.CTA')}
        onRetry={() => state.retryFetch()}
        {...rest}
      />
    );
  }

  return <EntityPagePlain state={state} {...rest} />;
}

export const EntityPageWrapper = observer(_EntityPageWrapper);