import { Page } from '@wix/design-system';
import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useEntityPageChild } from '../../hooks';
import { EntityPageProps } from './EntityPage';
import { FieldValues } from 'react-hook-form';
import { useIsMobile } from '../../hooks/useIsMobile';
import { st, classes } from './EntityPagePlain.st.css.js';

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

function _EntityPagePlain<T, V extends FieldValues = FieldValues>({
  state,
  children,
  ...rest
}: EntityPagePlainProps<T, V>) {
  const [scrollableRef, setScrollableRef] = useState<HTMLElement | null>(null);
  const childrenArr = useEntityPageChild(children, scrollableRef);
  const isMobile = useIsMobile();

  return (
    <Page
      className={st(classes.root, { mobile: isMobile })}
      minWidth={isMobile ? 0 : undefined}
      scrollableContentRef={setScrollableRef}
      {...rest}
    >
      {childrenArr}
    </Page>
  );
}

export const EntityPagePlain = observer(_EntityPagePlain);