import React from 'react';
import { observer } from 'mobx-react-lite';
import { SettingsPageProps } from './SettingsPage';
import { SettingsPagePlain } from './SettingsPagePlain';
import { FieldValues } from 'react-hook-form';
import { PageErrorState } from '../PageErrorState';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface SettingsPageWrapperProps<
  T,
  V extends FieldValues = FieldValues,
> extends SettingsPageProps<T, V> {}

function _SettingsPageWrapper<T, V extends FieldValues = FieldValues>({
  state,
  ...rest
}: SettingsPageWrapperProps<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 <SettingsPagePlain state={state} {...rest} />;
}

export const SettingsPageWrapper = observer(_SettingsPageWrapper);