import React, { useEffect } from 'react';
import { PageProps } from '@wix/design-system';
import { SettingsPageState } from '../../state';
import { observer } from 'mobx-react-lite';
import { SettingsPageWrapper } from './SettingsPageWrapper';
import { SettingsPageContextProvider } from '../../providers';
import { FieldValues, FormProvider } from 'react-hook-form';
import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
import { FormPageProvider } from '../FormPage';
import { SettingsPageHeader } from '../SettingsPageHeader';
import { SettingsPageContent } from '../SettingsPageContent';
import { SettingsPageMainContent } from '../SettingsPageMainContent';
import { SettingsPageAdditionalContent } from '../SettingsPageAdditionalContent';
import { SettingsPageCard } from '../SettingsPageCard';

export interface SettingsPageProps<T, V extends FieldValues = FieldValues>
  extends PageProps {
  /**
   * SettingsPageState instance created with the `useSettingsPage` hook
   */
  state: SettingsPageState<T, V>;
}

function _SettingsPage<T, V extends FieldValues = FieldValues>({
  state,
  ...rest
}: SettingsPageProps<T, V>) {
  if (process.env.NODE_ENV !== 'production') {
    minimalRequiredWdsRuntimeCheck({
      required: '^1.73.0',
      requiredBy: 'WixPatterns/SettingsPage',
    });
  }

  useEffect(() => state.init(), []);

  return (
    <SettingsPageContextProvider value={state}>
      <FormPageProvider state={state.formPage}>
        <FormProvider {...state.form}>
          <SettingsPageWrapper state={state} {...rest} />
        </FormProvider>
      </FormPageProvider>
    </SettingsPageContextProvider>
  );
}

_SettingsPage.Header = SettingsPageHeader;
_SettingsPage.Content = SettingsPageContent;
_SettingsPage.MainContent = SettingsPageMainContent;
_SettingsPage.AdditionalContent = SettingsPageAdditionalContent;
_SettingsPage.Card = SettingsPageCard;

_SettingsPage.displayName = 'SettingsPage';

export const SettingsPage = observer(_SettingsPage);