import { TextButton } from '@wix/design-system';
import React from 'react';
import { Filter } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { FilterToolbarState } from '../../providers';

export interface FilterAccordionResetButtonProps<V> {
  state: FilterToolbarState;
  filter: Filter<V>;
}

function _FilterAccordionResetButton<V>(
  props: FilterAccordionResetButtonProps<V>,
) {
  const { state } = props;
  const { translate: t } = useWixPatternsContainer();

  const filter = state.getPendingFilter(props.filter);

  if (filter.isEmpty) {
    return null;
  }

  return (
    <TextButton
      dataHook={`reset-filter-${filter.name}`}
      size="medium"
      onClick={(e: React.MouseEvent) => {
        e.stopPropagation();
        filter.reset({ emitEvents: ['change', 'refresh'] });
      }}
    >
      {t('cairo.filtersPanel.reset')}
    </TextButton>
  );
}

export const FilterAccordionResetButton = observer(
  _FilterAccordionResetButton,
);
