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

interface PickerEmptyStateProps<T, F extends FiltersMap = OptionalFiltersMap>
  extends Omit<CollectionEmptyStateBaseProps<T, F>, 'state'> {
  hasFilterDropdown?: boolean;
  state: PickerState<T, F>;
}

function _PickerEmptyState<T, F extends FiltersMap>(
  props: PickerEmptyStateProps<T, F>,
) {
  const { state, hasFilterDropdown, ...rest } = props;
  const { collection } = state;

  const {
    result: { hasAvailableItems },
    translate: t,
  } = collection;

  const showFilterOnlyEmptyState = Boolean(
    hasFilterDropdown && collection.query.search.isEmpty,
  );

  const showFilterWithSearchEmptyState = Boolean(
    hasFilterDropdown && !collection.query.search.isEmpty,
  );

  const searchOnlyNoResultsStateProps = {
    state: collection,
    dataHook: 'picker-no-results-state',
    title: t('cairo.search.nothingMatches.title', {
      term: collection.result.originQuery.rawSearch,
    }),
    subtitle: (
      <Box direction="vertical" gap="18px" align="center">
        <Text dataHook="picker-no-results-state-subtitle" size="small">
          {t('cairo.search.nothingMatches.text')}
        </Text>
        <TextButton
          dataHook="picker-no-results-state-reset-button"
          prefixIcon={<Revert />}
          onClick={() => {
            collection.clearSearch();
            collection.searchInputRef?.focus();
          }}
        >
          {t('cairo.emptyState.reset.button')}
        </TextButton>
      </Box>
    ),
  };

  const filterOnlyEmptyStateProps: CollectionEmptyStateBaseProps<T, F> = {
    state: collection,
    dataHook: 'picker-empty-state-only-filter',
    title: t('cairo.search.noresults.title'),
    subtitle: t('cairo.selectorModal.searchEmptyState.changeFilter.subtitle'),
  };

  const filterWithSearchEmptyStateProps: CollectionEmptyStateBaseProps<T, F> = {
    state: collection,
    dataHook: 'picker-empty-state-filter-with-search',
    title: t('cairo.search.nothingMatches.title', {
      term: collection.result.originQuery.rawSearch,
    }),
    subtitle: (
      <Box direction="vertical" gap="18px" align="center">
        <Text size="small" dataHook="picker-no-results-state-subtitle">
          {t('cairo.selectorModal.searchEmptyState.subtitle')}
        </Text>
        <TextButton
          dataHook="picker-no-results-state-reset-button"
          prefixIcon={<Revert />}
          onClick={() => {
            collection.clearSearch();
            collection.searchInputRef?.focus();
          }}
        >
          {t('cairo.emptyState.reset.button')}
        </TextButton>
      </Box>
    ),
  };

  const getEmptyStateConfig = (): CollectionEmptyStateBaseProps<T, F> => {
    if (!hasAvailableItems) {
      return {
        state: collection,
        dataHook: 'picker-empty-state',
      };
    }
    if (showFilterOnlyEmptyState) {
      return filterOnlyEmptyStateProps;
    }
    if (showFilterWithSearchEmptyState) {
      return filterWithSearchEmptyStateProps;
    }

    return searchOnlyNoResultsStateProps;
  };

  return <CollectionEmptyStateBase {...getEmptyStateConfig()} {...rest} />;
}

export const PickerEmptyState = observer(_PickerEmptyState);