/* eslint-disable react/prop-types */
import { getWordBreakStyle } from '@blocklet/payment-react';
import { Avatar, Stack, SxProps, Typography, Tooltip } from '@mui/material';
import type { LiteralUnion } from 'type-fest';

type Props = {
  logo?: string;
  name: string | React.ReactNode;
  description: any;
  size?: number;
  variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
  sx?: SxProps;
  className?: string;
  logoName?: string;
  tooltip?: string | React.ReactNode;
};

export default function InfoCard(rawProps: Props) {
  const props = Object.assign(
    {
      logo: '',
      size: 40,
      variant: 'rounded',
      sx: {},
      className: '',
      logoName: '',
      tooltip: false,
    },
    rawProps
  );
  const dimensions = { width: props.size, height: props.size, ...props.sx };
  const avatarName = typeof props.name === 'string' ? props.name : props.logo;

  const cardContent = (
    <Stack
      direction="row"
      spacing={1}
      className={`info-card-wrapper ${props.className}`}
      sx={{
        alignItems: 'center',
        cursor: props.tooltip ? 'pointer' : 'default',
      }}>
      {props.logo ? (
        <Avatar src={props.logo} alt={props.logoName ?? avatarName} variant={props.variant as any} sx={dimensions} />
      ) : (
        <Avatar variant={props.variant as any} sx={dimensions}>
          {avatarName?.slice(0, 1)}
        </Avatar>
      )}
      <Stack
        direction="column"
        className="info-card"
        sx={{
          alignItems: 'flex-start',
          justifyContent: 'space-around',
          wordBreak: getWordBreakStyle(props.name),
          minWidth: 140,
        }}>
        <Typography
          variant="body2"
          component="div"
          sx={{
            color: 'text.primary',
          }}>
          {props.name}
        </Typography>
        {props.description && (
          <Typography
            variant="subtitle2"
            sx={{
              color: 'text.secondary',
            }}>
            {props.description}
          </Typography>
        )}
      </Stack>
    </Stack>
  );

  if (props.tooltip) {
    return (
      <Tooltip
        title={props.tooltip}
        placement="top-start"
        slotProps={{
          tooltip: {
            sx: {
              bgcolor: 'background.paper',
              color: 'text.primary',
              boxShadow: 2,
              borderRadius: 2,
              padding: '10px 16px',
              fontSize: 14,
              maxWidth: 400,
              minWidth: 240,
              wordBreak: 'break-word',
              border: '1px solid',
              borderColor: 'divider',
              '& .MuiTooltip-arrow': {
                color: 'background.paper',
                '&::before': {
                  border: '1px solid',
                  borderColor: 'divider',
                  backgroundColor: 'background.paper',
                },
              },
            },
          },
        }}>
        {cardContent}
      </Tooltip>
    );
  }

  return cardContent;
}
