import React, { ReactNode } from 'react';
import { observer } from 'mobx-react-lite';
import { useMultiCollectionSupportContext } from '../MultiCollectionSupportProvider';
import { TextButton, TextButtonProps } from '@wix/design-system';
import { Revert } from '@wix/wix-ui-icons-common';
import {
  useWixPatternsContainer,
  useCollectionContext,
} from '@wix/bex-core/react';
// import { EmptyStateBasePrivateProps } from '../components/EmptyState/EmptyStateBase';
import { FiltersMap, MultiCollectionSupport, Translate } from '@wix/bex-core';
import { EmptyStateBase, EmptyStateBaseProps } from './EmptyStateBase';
import { MagnifyingGlassArt } from '../MagnifyingGlassArt';

export interface CollectionNoResultsStateProps
  extends Omit<Partial<EmptyStateBaseProps>, 'cta' | 'image' | 'customCta'> {
  children?: ReactNode;
}

function _CollectionNoResultsState(
  props: Omit<CollectionNoResultsStateProps, 'image'>,
) {
  const state = useMultiCollectionSupportContext();
  const { translate: t } = useWixPatternsContainer();
  const { title, subtitle, cta } = getNoResultsStateTexts(state, t);

  return (
    <EmptyStateBase
      dataHook="collection-empty-state"
      title={title}
      subtitle={subtitle}
      {...props}
      cta={cta}
      image={<MagnifyingGlassArt data-hook="empty-state-glass-illustration" />}
    />
  );
}

function ResetFiltersButton(props: TextButtonProps) {
  const state = useCollectionContext();

  return (
    <TextButton
      {...props}
      prefixIcon={<Revert />}
      dataHook="empty-state-clear-filters-button"
      onClick={() => {
        state.emitter.emit('beforeClearFilters', { origin: 'empty-state' });
        state.resetFiltersAndRefresh();
        state.searchInputRef?.focus();
      }}
    />
  );
}

const getNoResultsStateTexts = (
  state: MultiCollectionSupport<FiltersMap>,
  t: Translate,
) => {
  const {
    hasAvailableItems,
    hasNonPersistentCustomFilters,
    resultOriginQuerySearch: search,
    resultOriginQueryRawSearch: rawSearch,
  } = state;
  // has search no filter
  if (hasAvailableItems && search && !hasNonPersistentCustomFilters) {
    return {
      title: t('cairo.search.nothingMatches.title', {
        term: rawSearch,
      }),
      subtitle: t('cairo.search.nothingMatches.text'),
      cta: (
        <ResetFiltersButton>
          {t('cairo.emptyState.reset.button')}
        </ResetFiltersButton>
      ),
    };
  }
  // has filter no search
  if (hasAvailableItems && !search && hasNonPersistentCustomFilters) {
    return {
      title: t('cairo.search.noresults.title'),
      subtitle: t('cairo.emptyState.subtitle.noFilterResults'),
      cta: (
        <ResetFiltersButton>
          {t('cairo.emptyState.filters.nothingFound.clearFilters.CTA')}
        </ResetFiltersButton>
      ),
    };
  }
  // has filter and search
  return {
    title: t('cairo.search.nothingMatches.title', {
      term: rawSearch,
    }),
    subtitle: t('cairo.search.filter.nothingMatches.text'),
    cta: (
      <ResetFiltersButton>
        {t('cairo.emptyState.reset.button')}
      </ResetFiltersButton>
    ),
  };
};

export const CollectionNoResultsState = observer(_CollectionNoResultsState);