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

import { IconListSearch, IconTrash, IconX } from '@tabler/icons-react';
import ButtonBase from '@material-hu/mui/ButtonBase';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
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;
  onRemove: (term: string) => void;
  onClear: () => void;
};

const RecentSearches: FC<Props> = ({ items, onSelect, onRemove, onClear }) => {
  const { t } = useTranslation(['global_search', 'general']);
  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 => (
          <Stack
            key={term}
            direction="row"
            sx={{ alignItems: 'center', gap: 0.5, px: 1 }}
          >
            <ButtonBase
              onClick={() => onSelect(term)}
              sx={{
                flex: 1,
                justifyContent: 'flex-start',
                gap: 1.5,
                py: 1,
                overflow: 'hidden',
              }}
            >
              <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={{
                  flex: 1,
                  textAlign: 'left',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                }}
              >
                {term}
              </Typography>
            </ButtonBase>
            <IconButton
              aria-label={t('delete')}
              size="small"
              onClick={() => onRemove(term)}
              sx={{
                flexShrink: 0,
                color: theme.palette.new.text.neutral.lighter,
              }}
            >
              <IconX size={16} />
            </IconButton>
          </Stack>
        ))}
      </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;
