import React, { ReactNode } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { DropdownTranslationContext } from './DropdownTranslationProvider';
import { useSelector } from '../useSelector';

export const FilterTranslationProvider: React.FC<{
  children: ReactNode;
}> = ({ children }) => {
  const { translate: t, initTask } = useWixPatternsContainer();
  useSelector(() => initTask.status);

  const placeholder = (() => {
    const translationKey = 'cairo.selectPlaceholder';
    if (t(translationKey) !== translationKey) {
      return t(translationKey);
    }
    return '';
  })();

  return (
    <DropdownTranslationContext.Provider
      value={{
        translations: {
          selectedItems: ({ total }) =>
            t('cairo.dropdownSearch.filters.selected', { total }),
          emptyState: t('cairo.dropdownSearch.filters.emptyState'),
          noResultsState: t('cairo.dropdownSearch.filters.noResults'),
          placeholder,
          clearButtonTooltip: t('cairo.dropdownSearch.select.filers.clear'),
        },
      }}
    >
      {children}
    </DropdownTranslationContext.Provider>
  );
};