import {
  FilterItem,
  OperatorFilterValue,
  getOperatorLabel,
  Translate,
} from '@wix/bex-core';
import { createElement } from 'react';
import { FilterProps } from '../../model';
import { FilterTagContent } from '../AppliedFiltersTagList/FilterTagContent';

export const renderOperatorFilterToolbarTag = (
  container: { translate: Translate },
  params: { filterProps: FilterProps<any> },
) => {
  return <T>(item: FilterItem<OperatorFilterValue<T>>) => {
    const { filterProps } = params;
    const { translate: t } = container;
    const { operator, value } = item as FilterItem<OperatorFilterValue<T>>;

    const operatorLabel = t(getOperatorLabel(operator));
    const displayValue = value != null && value !== '' ? `  ${value}` : '';

    return {
      children: createElement(
        FilterTagContent,
        { filterProps },
        `${operatorLabel}${displayValue}`,
      ),
    };
  };
};
