import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Text, TextButton } from '@wix/design-system';
import { Revert } from '@wix/wix-ui-icons-common';
import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
import { FiltersMap } from '@wix/bex-core';
import { CollectionEmptyStateBase } from '../CollectionEmptyStateBase';

export interface CustomColumnsNoResultsProps<T, F extends FiltersMap> {
  state: CustomColumnsPanelStateBase<T, F>;
}

export function _CustomColumnsNoResults<T, F extends FiltersMap>({
  state,
}: CustomColumnsNoResultsProps<T, F>) {
  const { columnsCollection } = state;
  const { translate: t } = columnsCollection;

  return (
    <CollectionEmptyStateBase
      state={columnsCollection}
      dataHook="custom-columns-no-results-state"
      theme="page-no-border"
      title={t('cairo.search.nothingMatches.title', {
        term: state.searchValue,
      })}
      subtitle={
        <Box direction="vertical" gap="SP3" align="center">
          <Text dataHook="custom-columns-no-results-subtitle" size="small">
            {t('cairo.search.nothingMatches.text')}
          </Text>
          <TextButton
            dataHook="custom-columns-no-results-reset-button"
            prefixIcon={<Revert />}
            onClick={() => {
              state.setSearchValue('');
              state.columnsCollection.searchInputRef?.focus();
            }}
          >
            {t('cairo.emptyState.reset.button')}
          </TextButton>
        </Box>
      }
    />
  );
}

export const CustomColumnsNoResults = observer(_CustomColumnsNoResults);