import { type FC } from 'react';

import { IconAlertCircle, IconCloudStorm } from '@material-hu/icons/tabler';
import Avatar from '@material-hu/mui/Avatar';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

type ConversationErrorProps = {
  refetch: () => void;
  isNetworkOnline: boolean;
  isRefetching: boolean;
};

const SIZE_AVATAR = 64;
const SIZE_ICON = 32;

const ConversationError: FC<ConversationErrorProps> = ({
  refetch,
  isNetworkOnline,
  isRefetching,
}) => {
  const { t } = useLokaliseTranslation(['chat', 'general']);
  const theme = useTheme();
  const avatarBgColor = isNetworkOnline
    ? theme.palette.new.background.feedback.error
    : theme.palette.new.background.feedback.warning;
  const errorKey = isNetworkOnline
    ? 'chat:errors.try_again'
    : 'chat:connection.retry';
  return (
    <Stack
      sx={{
        alignItems: 'center',
        justifyContent: 'center',
        height: 'inherit',
        gap: 8,
      }}
    >
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Avatar
          sx={{
            bgcolor: avatarBgColor,
            width: SIZE_AVATAR,
            height: SIZE_AVATAR,
            mb: 1,
          }}
        >
          {isNetworkOnline ? (
            <IconAlertCircle
              size={SIZE_ICON}
              color={theme.palette.new.text.feedback.error}
            />
          ) : (
            <IconCloudStorm
              size={SIZE_ICON}
              color={theme.palette.new.text.feedback.warning}
            />
          )}
        </Avatar>
        <Typography
          variant="globalL"
          fontWeight="fontWeightSemiBold"
        >
          {t('chat:errors.load_messages')}
        </Typography>
        <Typography variant="globalS">{t(errorKey)}</Typography>
      </Stack>
      {isNetworkOnline && (
        <Button
          variant="outlined"
          color="secondary"
          loading={isRefetching}
          disabled={isRefetching}
          sx={{
            minWidth: 256,
          }}
          onClick={refetch}
        >
          {t('general:try_again')}
        </Button>
      )}
    </Stack>
  );
};

export default ConversationError;
