import { Page } from '@wix/design-system';
import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useSettingsPageChild } from '../../hooks';
import { SettingsPageProps } from './SettingsPage';
import { FieldValues } from 'react-hook-form';

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

function _SettingsPagePlain<T, V extends FieldValues = FieldValues>({
  state,
  children,
  ...rest
}: SettingsPagePlainProps<T, V>) {
  const [scrollableRef, setScrollableRef] = useState<HTMLElement | null>(null);
  const childrenArr = useSettingsPageChild(children, scrollableRef);

  return (
    <Page scrollableContentRef={setScrollableRef} {...rest}>
      {childrenArr}
    </Page>
  );
}

export const SettingsPagePlain = observer(_SettingsPagePlain);