import { Text } from '@wix/design-system';
import React from 'react';
import { Filter } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import { FilterProps } from '../../model';
import { FilterToolbarState } from '../../providers';
import { usePatternsTheme } from '../../themes/PatternsThemeProvider';

export interface FilterAccordionTitleProps<V> {
  state: FilterToolbarState;
  filter: Filter<V>;
  filterProps: FilterProps<V>;
}

function _FilterAccordionTitle<V>(props: FilterAccordionTitleProps<V>) {
  const { state, filterProps } = props;
  const { accordionItemProps } = filterProps;

  const filter = state.getPendingFilter(props.filter);

  const { sizes } = usePatternsTheme();

  return (
    <Text
      dataHook={`accordion-item-title-${filter.name}`}
      ellipsis
      weight="normal"
      size={sizes.medium}
    >
      {`${accordionItemProps?.label ?? ''}${
        filter.size > 0 ? ` (${filter.size})` : ''
      }`}
    </Text>
  );
}

export const FilterAccordionTitle = observer(_FilterAccordionTitle);
