'use client';
import { Buttons } from './Buttons';
import { FormContext, FormContextProvider } from './context/form-context';
import { Elements } from './Elements';
import { Files } from './Files';
import { Header } from './Header';
import { Overlay } from './Overlay';
import type { Props } from './types';
import { createUrl } from '@/utils/url';
import { Background, Divider } from '@repo/ui';
import type { FC } from 'react';
import { useContext } from 'react';

function Content(props: Props) {
  const { title } = props;
  const { pageUrlParams } = useContext(FormContext);

  return (
    <Background className="relative flex w-full flex-col gap-2 p-5">
      <Overlay />
      <Header title={title} link={'/ius' + createUrl({ ...pageUrlParams, route: '/conditions' })} />
      <Elements {...props} />
      <Divider />
      <Files {...props} />
      <Divider />
      <Buttons />
    </Background>
  );
}

function withContext<T extends Props>(Component: FC<T>) {
  return (props: T) => {
    const { pageUrlParams } = props;

    return (
      <FormContextProvider pageUrlParams={pageUrlParams}>
        <Component {...props} />
      </FormContextProvider>
    );
  };
}

export const Form = withContext(Content);