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

import { useEditActions } from '../../../ItemPageEdit/useEditActions';
import { EditWrapper } from '../../lib/EditWrapper';
import { PageHeaderSection } from '../PageHeaderSection';
import { PageHeaderSectionSettings } from './PageHeaderSectionSettings';

export const PageHeaderSectionEdit: PageSectionComponent<
  PageHeaderSectionProps
> = (props) => {
  const { sectionPath } = props;

  const { updateLayoutSection } = useEditActions();

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

  return (
    <div data-testid="pageTitleSectionEdit">
      <EditWrapper
        sectionPath={sectionPath}
        padding="6rem 0 2rem"
        renderSettingsContent={() => (
          <PageHeaderSectionSettings data={props} onChange={handleChange} />
        )}
      >
        <PageHeaderSection {...props} />
      </EditWrapper>
    </div>
  );
};