import { BaseForm, IBaseFormProps } from '@/components/ra-forms/LongForm/BaseForm';
import { Content } from '@/components/ra-forms/LongForm/Content';
import { NavMenu } from '@/components/ra-forms/LongForm/NavMenu';
import { IProviderProps, Provider } from '@/components/ra-forms/LongForm/Provider';
import { Sidebar, useSidebarChildren } from '@/components/ra-forms/LongForm/Sidebar';
import { useBaseItemChildren } from '@/components/ra-forms/LongForm/Tab';
import { Disposition } from '@/components/ra-forms/LongForm/types';
import _ from 'lodash';

type IFormProps = IProviderProps &
  IBaseFormProps & {
    spacing?: number;
    tabsDisposition: Disposition;
    contentDisposition: Disposition;
    errorCount: boolean;
  };

function Form(props: IFormProps) {
  const { tabsDisposition, contentDisposition, spacing = 2 } = props;
  const providerProps = _.pick(props, ['syncWithLocation', 'errorCount']);
  const baseFormProps = _.omit(props, ['tabsDisposition', 'contentDisposition', 'syncWithLocation']);
  const { top: sidebarTop, bottom: sidebarBottom } = useSidebarChildren(props);
  const contentChildren = useBaseItemChildren(props);
  return (
    <Provider {...providerProps}>
      <BaseForm {...baseFormProps} spacing={spacing}>
        <Sidebar disposition={tabsDisposition} spacing={spacing}>
          {sidebarTop}
          <NavMenu />
          {sidebarBottom}
        </Sidebar>
        <Content disposition={contentDisposition}>{contentChildren}</Content>
      </BaseForm>
    </Provider>
  );
}

export { Form };