/* eslint-disable react/prop-types */
import React, { forwardRef } from 'react';
import { useTheme } from '@mui/material/styles';

import { ROW_SPACE } from '@/modules/@common/Form/constants';

import { SubFormGroupContext } from '../helpers/hooks';

import { Stack } from '@/mui/components';

import styles from './FormSection.module.scss';

/**
 * FormSection Component
 *
 * A component that provides form context and layout for child components.
 *
 * @param {object} props - Component properties.
 * @param {React.ReactNode} props.children - The child components to be rendered inside the form.
 * @param {string} [props.size='small'] - The size of the form, default is 'small'.
 *
 * @example
 * ```jsx
 * <FormSection size="small">
 *   <TextField label="Name" size="small" />
 *   <TextField label="Email" size="small" />
 * </FormSection>
 * ```
 */

// todo: temporary fix, should be rewrite to grid
const maxContentString = new Array(1024).fill('.').join(' ');

const FormSection = forwardRef((props, ref) => {
  const theme = useTheme();

  return (
    <Stack {...props} ref={ref} fullWidth spacing={ROW_SPACE} className={styles.Wrapper}>
      <SubFormGroupContext.Provider value={0}>{props.children}</SubFormGroupContext.Provider>
      <div className={styles.EndLine} style={{ '--internal-gap': theme.spacing(ROW_SPACE) }}>
        {maxContentString}
      </div>
    </Stack>
  );
});

export default FormSection;
