import React from 'react';
import { Box, Heading, Page } from '@wix/design-system';
import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
import { useCollectionPageContext } from '../../providers';
import { observer } from 'mobx-react-lite';
import { PageSubTitle } from '../../components/PageSubTitle';
import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
import { useIsMobile } from '../../hooks/useIsMobile';
import { classes, st } from './CollectionPageHeader.st.css.js';
import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
import { MoreActions } from '../../components/MoreActions';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { PanelHeader } from './PanelHeader';

const MoreActionsBySecondaryAction = observer(
  ({ child }: { child: CollectionPageHeaderElement }) => {
    const pageState = useCollectionPageContext();
    const { primaryToolbar } = pageState;

    const featuredActions = primaryToolbar?.getPageFeaturedActions();

    const forceMoreActions = featuredActions?.length ? (
      <MoreActions />
    ) : undefined;

    const moreActions = child.props.moreActions ?? forceMoreActions;

    if (!moreActions) {
      return null;
    }

    const { type: MoreActionsElementType, props: moreActionsProps } =
      moreActions;

    let items = moreActionsProps.items;

    if (featuredActions) {
      for (const factory of featuredActions) {
        items = pushFactoryIfNotExistsOrAddToTopOfGroup(items, factory);
      }
    }

    if (child.props.secondaryActions) {
      return <MoreActionsElementType {...moreActionsProps} items={items} />;
    }

    return <MoreActionsText {...moreActionsProps} items={items} />;
  },
);

export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
  const isMobile = useIsMobile();
  const { isPanelLayout } = useWixPatternsContainer();

  if (isPanelLayout) {
    return (
      <PanelHeader
        title={child.props.title.text}
        subtitle={child.props.subtitle?.text}
      />
    );
  }
  return (
    <Page.Header
      key={child.key}
      className={st(classes.root, { mobile: isMobile })}
      dataHook="collection-page-header"
      title={(minimized) => <CollectionPageHeaderTitle minimized={minimized} />}
      subtitle={
        child.props.subtitle ? (
          <PageSubTitle {...child.props.subtitle} />
        ) : undefined
      }
      actionsBar={
        <Box gap="SP2">
          {!isMobile && <MoreActionsBySecondaryAction child={child} />}
          {!isMobile && child.props.secondaryActions}
          {child.props.primaryAction}
        </Box>
      }
      breadcrumbs={
        isMobile
          ? () => {
              return <div></div>;
            }
          : child.props.breadcrumbs
      }
    />
  );
}

const CollectionPageHeaderTitle = observer(
  ({ minimized }: { minimized: boolean }) => {
    const state = useCollectionPageContext();
    const isMobile = useIsMobile();
    const titleContent = (
      <>
        <Box inline paddingRight="9px">
          {state.pageTitle}
        </Box>
        {state.total !== false && !state.hideHeaderTotal && (
          <Box inline color="D40" dataHook="page-header-total-count">
            {state.total}
          </Box>
        )}
      </>
    );

    if (minimized) {
      return titleContent;
    }

    return (
      <Heading size={isMobile ? 'large' : 'extraLarge'}>{titleContent}</Heading>
    );
  },
);
