import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import { IconListSearch, IconTrash } from '@tabler/icons-react';
import ButtonBase from '@material-hu/mui/ButtonBase';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuButton from '@material-hu/components/design-system/Buttons/Button';

type Props = {
  items: string[];
  onSelect: (term: string) => void;
  onClear: () => void;
};

const RecentSearches: FC<Props> = ({ items, onSelect, onClear }) => {
  const { t } = useTranslation('global_search');
  const theme = useTheme();

  return (
    <>
      <Stack sx={{ p: 2, pb: 1 }}>
        <Typography
          variant="globalXS"
          sx={{ color: theme.palette.new.text.neutral.lighter }}
        >
          {t('recent_searches_state.title')}
        </Typography>
      </Stack>
      <Stack sx={{ flex: 1, overflowY: 'auto', px: 1, pb: 1 }}>
        {items.map(term => (
          <ButtonBase
            key={term}
            onClick={() => onSelect(term)}
            sx={{
              justifyContent: 'flex-start',
              gap: 1.5,
              px: 1,
              py: 1,
            }}
          >
            <Stack
              sx={{
                width: 40,
                height: 40,
                borderRadius: '50%',
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: theme.palette.new.background.elements.grey,
                color: theme.palette.new.text.neutral.default,
                flexShrink: 0,
              }}
            >
              <IconListSearch size={20} />
            </Stack>
            <Typography
              variant="globalS"
              sx={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {term}
            </Typography>
          </ButtonBase>
        ))}
      </Stack>
      <Divider />
      <HuButton
        variant="text"
        endIcon={<IconTrash size={16} />}
        onClick={onClear}
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          py: 3,
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
        }}
      >
        {t('recent_searches_state.clear')}
      </HuButton>
    </>
  );
};

export default RecentSearches;