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

export interface TabTotalDropdownOptionProps<V, T, F extends FiltersMap>
  extends UseFilterValueTotalStateParams<V, T, F> {}

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

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

  const { isIdle, isLoading } = initTask.status;

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

_TabTotalDropdownOption.initTabTotal = initTabTotal;
export const TabTotalDropdownOption = observer(_TabTotalDropdownOption);
TabTotalDropdownOption.displayName = 'TabTotalDropdownOption';
TabTotalDropdownOption.initTabTotal = initTabTotal;