import { Box, Text, TextButton } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { FiltersPanelState } from './FiltersPanelState';

export interface FiltersPanelSearchNoResultsProps<T, F extends FiltersMap> {
  state: FiltersPanelState<T, F>;
}

function _FiltersPanelSearchNoResults<T, F extends FiltersMap>({
  state,
}: FiltersPanelSearchNoResultsProps<T, F>) {
  const { translate: t } = useWixPatternsContainer();

  return (
    <Box
      dataHook="filters-panel-search-no-results"
      direction="vertical"
      align="center"
      verticalAlign="middle"
      gap="SP2"
      padding="SP6 SP3"
    >
      <Text
        dataHook="filters-panel-search-no-results-title"
        size="small"
        secondary
      >
        {t('cairo.filtersPanel.search.noResults.title', {
          term: state.searchValue.trim(),
        })}
      </Text>
      <TextButton
        dataHook="filters-panel-search-clear-button"
        size="small"
        onClick={() => state.clearSearch()}
      >
        {t('cairo.filtersPanel.search.clearButton')}
      </TextButton>
    </Box>
  );
}

export const FiltersPanelSearchNoResults = observer(
  _FiltersPanelSearchNoResults,
);