import { observer } from 'mobx-react-lite';
import { CounterBadge, CounterBadgeProps } from '@wix/design-system';
import React from 'react';
import {
  useFilterValueTotalState,
  UseFilterValueTotalStateParams,
} from './useFilterValueTotalState';
import { FiltersMap } from '@wix/bex-core';
import { initTabTotal } from '../../state/initTabTotal';

export interface TabCounterBadgeProps<V, T, F extends FiltersMap>
  extends UseFilterValueTotalStateParams<V, T, F>,
    Partial<CounterBadgeProps> {}

function _TabCounterBadge<V, T = unknown, F extends FiltersMap = FiltersMap>(
  props: TabCounterBadgeProps<V, T, F>,
) {
  const { value, skin = 'neutralStandard', ...rest } = props;
  const state = useFilterValueTotalState(props);

  const {
    totalsCollection: { totalStatus, total, lifecycleState },
  } = state;

  return totalStatus === 'success' && lifecycleState === 'result' ? (
    <CounterBadge skin={skin} {...rest}>
      {total}
    </CounterBadge>
  ) : null;
}

_TabCounterBadge.initTabTotal = initTabTotal;
export const TabTotalCounterBadge = observer(_TabCounterBadge);
TabTotalCounterBadge.displayName = 'TabTotalCounterBadge';
TabTotalCounterBadge.initTabTotal = initTabTotal;
