import { observer } from 'mobx-react-lite';
import { Text } 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 TabTotalParensProps<V, T, F extends FiltersMap>
  extends UseFilterValueTotalStateParams<V, T, F> {}

function _TabTotalParens<V, T = unknown, F extends FiltersMap = FiltersMap>(
  props: TabTotalParensProps<V, T, F>,
) {
  const state = useFilterValueTotalState(props);

  const {
    totalsCollection: {
      result: { total },
      initTask,
    },
  } = state;

  const { isIdle, isLoading } = initTask.status;

  return isIdle || isLoading ? null : (
    <Text size="small">
      (<span data-hook="total">{total}</span>)
    </Text>
  );
}

_TabTotalParens.initTabTotal = initTabTotal;
export const TabTotalParens = observer(_TabTotalParens);
TabTotalParens.displayName = 'TabTotalParens';
TabTotalParens.initTabTotal = initTabTotal;