import { observer } from 'mobx-react-lite';
import React from 'react';
import { ContentFilter } from '@wix/wix-ui-icons-common';
import { CounterBadgeButton } from '../CounterBadgeButton';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';

const _MoreFiltersCTA = () => {
  const state = useToolbarCollectionContext();
  const {
    toolbar: { responsive },
    container: { translate: t },
  } = state;

  return (
    <CounterBadgeButton
      dataHook="more-filters-button-counter"
      count={state.collection.query.nonPersistentCustomFiltersCount}
    >
      <ResponsiveButton
        state={responsive.filters}
        shouldShrink={false}
        key="more-filters-button"
        dataHook="more-filters-button"
        icon={<ContentFilter />}
        onClick={state.toolbarFiltersState?.onFiltersButtonClick}
      >
        {t('cairo.toolbar.moreFiltersButton', { defaultValue: '' })}
      </ResponsiveButton>
    </CounterBadgeButton>
  );
};

export const MoreFiltersCTA = observer(_MoreFiltersCTA);
