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

import { type Icon, IconCircleX, IconInfoCircle } from '@tabler/icons-react';
import { type Theme } from '@material-hu/mui';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { type PlaceholderVariant } from './types';

type Props = {
  variant: PlaceholderVariant;
};

type CenteredCopy = {
  icon: Icon;
  iconBg: (theme: Theme) => string;
  iconColor: (theme: Theme) => string;
  titleKey: string;
  descriptionKey: string;
};

const CENTERED: Record<'empty' | 'error', CenteredCopy> = {
  empty: {
    icon: IconInfoCircle,
    iconBg: theme => theme.palette.new.background.layout.brand,
    iconColor: theme => theme.palette.new.text.neutral.brand,
    titleKey: 'empty_state.title',
    descriptionKey: 'empty_state.description',
  },
  error: {
    icon: IconCircleX,
    iconBg: theme => theme.palette.new.background.feedback.error,
    iconColor: theme => theme.palette.new.text.feedback.error,
    titleKey: 'error_state.title',
    descriptionKey: 'error_state.description',
  },
};

const CenteredPlaceholder: FC<{ copy: CenteredCopy }> = ({ copy }) => {
  const { t } = useTranslation('global_search');
  const theme = useTheme();
  const IconComponent = copy.icon;

  return (
    <Stack
      sx={{
        alignItems: 'center',
        p: 2,
        border: '1px solid',
        borderColor: theme => theme.palette.new.border.neutral.default,
        borderRadius: theme => theme.shape.borderRadiusL,
      }}
    >
      <Stack
        sx={{
          width: 40,
          height: 40,
          borderRadius: '50%',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: copy.iconBg(theme),
          color: copy.iconColor(theme),
        }}
      >
        <IconComponent size={20} />
      </Stack>
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'fontWeightSemiBold', mt: 1 }}
      >
        {t(copy.titleKey)}
      </Typography>
      <Typography
        variant="globalXS"
        sx={{
          color: theme.palette.new.text.neutral.lighter,
          textAlign: 'center',
        }}
      >
        {t(copy.descriptionKey)}
      </Typography>
    </Stack>
  );
};

const NoResultsPlaceholder: FC = () => {
  const { t } = useTranslation('global_search');
  const theme = useTheme();

  return (
    <Stack sx={{ p: 2 }}>
      <Typography
        variant="globalS"
        sx={{ fontWeight: 'fontWeightSemiBold' }}
      >
        {t('no_results_state.title')}
      </Typography>
      <Typography
        variant="globalXS"
        sx={{ color: theme.palette.new.text.neutral.lighter }}
      >
        {t('no_results_state.description')}
      </Typography>
    </Stack>
  );
};

const PlaceholderState: FC<Props> = ({ variant }) => {
  if (variant === 'no-results') {
    return <NoResultsPlaceholder />;
  }
  return <CenteredPlaceholder copy={CENTERED[variant]} />;
};

export default PlaceholderState;