import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Virtuoso } from 'react-virtuoso';

import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import { useOwnAccount } from 'soapbox/hooks';
import { groupSearchHistory } from 'soapbox/settings';
import { clearRecentGroupSearches } from 'soapbox/utils/groups';

interface Props {
  onSelect(value: string): void
}

export default (props: Props) => {
  const { onSelect } = props;

  const me = useOwnAccount();

  const [recentSearches, setRecentSearches] = useState<string[]>(groupSearchHistory.get(me?.id as string) || []);

  const onClearRecentSearches = () => {
    clearRecentGroupSearches(me?.id as string);
    setRecentSearches([]);
  };

  return (
    <Stack space={2} data-testid='recent-searches'>
      {recentSearches.length > 0 ? (
        <>
          <HStack
            alignItems='center'
            justifyContent='between'
            className='bg-white dark:bg-gray-900'
          >
            <Text theme='muted' weight='semibold' size='sm'>
              Recent searches
            </Text>

            <button onClick={onClearRecentSearches} data-testid='clear-recent-searches'>
              <Text theme='primary' size='sm' className='hover:underline'>
                Clear All
              </Text>
            </button>
          </HStack>

          <Virtuoso
            useWindowScroll
            data={recentSearches}
            itemContent={(_index, recentSearch) => (
              <div key={recentSearch} data-testid='recent-search'>
                <button
                  onClick={() => onSelect(recentSearch)}
                  className='group flex w-full flex-col rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-800'
                  data-testid='recent-search-result'
                >
                  <HStack alignItems='center' space={2}>
                    <div className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
                      <Icon
                        src={require('@tabler/icons/hash.svg')}
                        className='h-5 w-5 text-gray-600'
                      />
                    </div>

                    <Text weight='bold' size='sm' align='left'>{recentSearch}</Text>
                  </HStack>
                </button>
              </div>
            )}
          />
        </>
      ) : (
        <Stack space={2} data-testid='recent-searches-blankslate'>
          <Text weight='bold' size='lg'>
            <FormattedMessage id='groups.discover.search.blankslate.title' defaultMessage='No recent searches' />
          </Text>

          <Text theme='muted'>
            <FormattedMessage id='groups.discover.search.blankslate.subtitle' defaultMessage='Search group names, topics or keywords' />
          </Text>
        </Stack>
      )}
    </Stack>
  );
};