import { observer } from 'mobx-react-lite';
import {
  Box,
  CounterBadge,
  Heading,
  InfoIcon,
  InfoIconProps,
  Text,
  TextButton,
} from '@wix/design-system';
import React, { ReactNode } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import type { FiltersMap } from '@wix/bex-core';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { withoutDefaults } from '@wix/bex-core';
import { cairoLearnMore } from '@wix/bex-utils/@wix/bi-logger-os-data/v2';

export interface ToolbarTitleProps {
  /**
   * Title to display at the left of the table's toolbar.
   * @external
   */
  title: string | ReactNode;
  /**
   * Subtitle to display at the left of the table's toolbar under the title.
   * @param {string} text The subtitle text
   * @param {[InfoIconProps](https://www.docs.wixdesignsystem.com/?path=/story/components-form--infoicon)} info info to display an info icon next to the subtitle text
   * @param {string} learnMore an object with a `url`(required) and a `label`(optional), for displaying a link button on the subtitle
   * @external
   */
  subtitle?: {
    text: string;
    info?: InfoIconProps;
    learnMore?: {
      url: string;
      label?: string;
    };
  };
  /**
   * Whether to show a total count badge next to the title.
   * @external
   */
  showTotal?: boolean;
  /**
   * Maximum number of items that can be displayed.
   * <br><br>
   * Shows only when `showTotal` is `true`.
   * @external
   */
  itemsLimit?: number;
}

export const ToolbarTitle = observer(function ToolbarTitle<
  T,
  F extends FiltersMap = FiltersMap,
>({ title, subtitle, showTotal, itemsLimit }: ToolbarTitleProps) {
  const { translate: t } = useWixPatternsContainer();
  const {
    collection: {
      result: { total, status },
    },
    reportBi,
  } = useToolbarCollectionContext<T, F>();

  return (
    <Box direction="vertical" paddingTop="SP2" paddingBottom="SP2" width="100%">
      <Box minWidth={0} verticalAlign="middle" gap="SP1">
        <Heading dataHook="toolbar-title" ellipsis size="medium">
          {title}
        </Heading>
        {showTotal && (total || status.isSuccess) && (
          <CounterBadge
            size="small"
            skin="neutralLight"
            dataHook="toolbar-counter"
          >
            <>{itemsLimit === undefined ? total : `${total} / ${itemsLimit}`}</>
          </CounterBadge>
        )}
      </Box>
      <Box gap="SP1" verticalAlign="middle">
        <Text
          dataHook="toolbar-subtitle"
          size="medium"
          weight="thin"
          secondary
          ellipsis
        >
          {subtitle?.text}
        </Text>
        {subtitle?.info && <InfoIcon {...subtitle.info} size="small" />}
        {subtitle?.learnMore && (
          <TextButton
            dataHook="toolbar-subtitle-learn-more-cta"
            as="a"
            rel="noopener"
            target="_blank"
            href={subtitle.learnMore.url}
            onClick={() => {
              reportBi(
                withoutDefaults(cairoLearnMore)({
                  origin: 'Toolbar Subtitle',
                }),
              );
            }}
          >
            {subtitle.learnMore.label || t('cairo.table.subtitle.learnMore')}
          </TextButton>
        )}
      </Box>
    </Box>
  );
});