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 { useIsMobile } from '../../hooks/useIsMobile';
import { classes, st } from './CollectionPageHeader.st.css.js';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { PanelHeader } from './PanelHeader';
import { CollectionPageActionsBar } from './CollectionPageActionsBar';

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={<CollectionPageActionsBar child={child} />}
      breadcrumbs={
        isMobile
          ? () => {
              return <div></div>;
            }
          : child.props.breadcrumbs
      }
    />
  );
}

const CollectionPageHeaderTitle = observer(
  ({ minimized }: { minimized: boolean }) => {
    const state = useCollectionPageContext();
    const isMobile = useIsMobile();

    if (minimized) {
      return <>{state.pageTitle}</>;
    }

    return (
      <Heading size={isMobile ? 'large' : 'extraLarge'}>
        <Box inline maxLines={1} paddingRight="9px" minWidth={0} width="100%">
          <Heading
            size={isMobile ? 'large' : 'extraLarge'}
            ellipsis
            showTooltip={!isMobile}
            placement="bottom"
          >
            {state.pageTitle}
          </Heading>
          {state.total !== false && !state.hideHeaderTotal && (
            <Box
              inline
              color="D40"
              paddingLeft="9px"
              dataHook="page-header-total-count"
            >
              {state.total}
            </Box>
          )}
        </Box>
      </Heading>
    );
  },
);