import React from 'react';
import { Box } from '@wix/design-system';
import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
import { useCollectionPageContext } from '../../providers';
import { observer } from 'mobx-react-lite';
import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
import { useIsMobile } from '../../hooks/useIsMobile';
import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
import { mergeActionsForNarrowMode } from './transformSecondaryActionsToMoreActions';
import { MoreActions } from '../../components/MoreActions';
import {
  MoreActionItemFactory,
  MoreActionsPropItem,
} from '../../components/MoreActions/MoreActionsBase';
import { useWixPatternsContainer } from '@wix/bex-core/react';

function withFeaturedActions(
  items: MoreActionsPropItem[] | MoreActionsPropItem[][] | undefined,
  featuredActions: MoreActionItemFactory[] | undefined,
) {
  if (!featuredActions) {
    return items;
  }
  let result = items;
  for (const factory of featuredActions) {
    result = pushFactoryIfNotExistsOrAddToTopOfGroup(result, factory);
  }
  return result;
}

const WideModeMoreActions = observer(
  ({ child }: { child: CollectionPageHeaderElement }) => {
    const { primaryToolbar } = useCollectionPageContext();
    const featuredActions = primaryToolbar?.getPageFeaturedActions();

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

    const moreActions = child.props.moreActions ?? forceMoreActions;
    if (!moreActions) {
      return null;
    }

    const { type: MoreActionsType, props: moreActionsProps } = moreActions;
    const items = withFeaturedActions(moreActionsProps.items, featuredActions);

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

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

const NarrowModeMoreActions = observer(
  ({ child }: { child: CollectionPageHeaderElement }) => {
    const { primaryToolbar } = useCollectionPageContext();
    const featuredActions = primaryToolbar?.getPageFeaturedActions();
    const moreActionsProps = child.props.moreActions?.props;

    const moreActionsItems = withFeaturedActions(
      moreActionsProps?.items,
      featuredActions,
    );

    const items = mergeActionsForNarrowMode(
      child.props.secondaryActions,
      moreActionsItems,
    );

    if (items.length === 0) {
      return null;
    }

    return (
      <MoreActions
        items={items}
        containerId={moreActionsProps?.containerId}
        exploreAppsModalProps={moreActionsProps?.exploreAppsModalProps}
        biAdditionalInfo={moreActionsProps?.biAdditionalInfo}
      />
    );
  },
);

export const CollectionPageActionsBar = observer(
  ({ child }: { child: CollectionPageHeaderElement }) => {
    const isMobile = useIsMobile();
    const { isNarrow } = useCollectionPageContext();
    const { internalExperiments } = useWixPatternsContainer();

    const isNarrowMode =
      isNarrow &&
      internalExperiments?.enabled('specs.cairo.CollectionPageMinWidth');

    if (isMobile) {
      return <Box gap="SP2">{child.props.primaryAction}</Box>;
    }

    if (isNarrowMode) {
      return (
        <Box gap="SP2">
          <NarrowModeMoreActions child={child} />
          {child.props.primaryAction}
        </Box>
      );
    }

    return (
      <Box gap="SP2">
        <WideModeMoreActions child={child} />
        {child.props.secondaryActions}
        {child.props.primaryAction}
      </Box>
    );
  },
);