import React from 'react';
import { useSettingsPageContext } from '../../providers';
import { useFormPageHeader } from '../FormPage';
import { SettingsPageHeaderElement } from '../../components/SettingsPageHeader';
import { SettingsPageActionsBar } from '../../components/SettingsPage/SettingsPageActionsBar';

export function useSettingsPageHeader(child: SettingsPageHeaderElement) {
  const state = useSettingsPageContext();

  const {
    title = null,
    subtitle = null,
    breadcrumbs = null,
  } = !state.isFetching ? child.props : {};

  const header = useFormPageHeader(child, {
    headerProps: {
      dataHook: 'settings-page-header',
      actionsBar: (
        <SettingsPageActionsBar moreActions={child.props.moreActions} />
      ),
    },
    overrides: {
      title,
      subtitle,
      breadcrumbs,
    },
  });

  return header;
}