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';
import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';

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 isHarmonyTheme = useBmHarmonyTheme();
  const defaultSkin = isHarmonyTheme ? 'general' : 'neutralStandard';
  const defaultSize = isHarmonyTheme ? 'tiny' : 'small';

  const { value, skin = defaultSkin, size = defaultSize, ...rest } = props;
  const state = useFilterValueTotalState(props);

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

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

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