import React from 'react';
import { EntityPageHeaderElement } from '../../components/EntityPageHeader';
import { useEntityPageContext } from '../../providers';
import { EntityPageActionsBar } from '../../components/EntityPage/EntityPageActionsBar';
import { useFormPageHeader } from '../FormPage';
import { useWixPatternsRouter } from '../../providers/WixPatternsRouterProvider';
import { useIsMobile } from '../../hooks/useIsMobile';
import { Breadcrumbs } from '@wix/design-system';

export function useEntityPageHeader(child: EntityPageHeaderElement) {
  const state = useEntityPageContext();
  const router = useWixPatternsRouter();

  const actionsBar = (
    <EntityPageActionsBar moreActions={child.props.moreActions} />
  );

  const routerEntityData = router?.currentState?._chosenEntity?.entity;
  const {
    title = null,
    subtitle = null,
    breadcrumbs = null,
  } = routerEntityData || !state.isFetching ? child.props : {};
  const isMobile = useIsMobile();

  const header = useFormPageHeader(child, {
    headerProps: {
      dataHook: 'entity-page-header',
      actionsBar,
      showBackButton: !isMobile,
      onBackClicked: () => state.navigateToParent(),
    },
    overrides: {
      title,
      subtitle: isMobile ? undefined : subtitle,
      breadcrumbs: isMobile ? <Breadcrumbs items={[]} /> : breadcrumbs,
    },
  });

  return header;
}