import type { PageSectionComponent } from '../../types';
import type { FormSectionProps } from '../types';

import { useEditActions } from '../../../ItemPageEdit/useEditActions';
import { EditWrapper } from '../../lib/EditWrapper';
import { FormSection } from '../FormSection';
import { FormSectionSettings } from './FormSectionSettings';

export const FormSectionEdit: PageSectionComponent<FormSectionProps> = (
  props
) => {
  const { sectionPath } = props;

  const { updateLayoutSection } = useEditActions();

  const handleChange = (data: Record<string, unknown>) => {
    updateLayoutSection({ sectionPath, changedProps: data });
  };

  return (
    <EditWrapper
      sectionPath={sectionPath}
      padding="5rem 1rem 2rem"
      renderSettingsContent={() => (
        <FormSectionSettings data={props} onChange={handleChange} />
      )}
      isMandatory
    >
      <FormSection {...props} />
    </EditWrapper>
  );
};