import { FC, ReactNode, PropsWithChildren } from 'react';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { SxProps, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import EmptyState from '../components/EmptyState';
import ErrorState from '../components/ErrorState';

export type ReportCardProps = PropsWithChildren<{
  title: ReactNode;
  subtitle?: ReactNode;
  description?: ReactNode;
  descriptionTooltip?: string;
  showEmpty?: boolean;
  showError?: boolean;
  loading?: boolean;
  sx?: SxProps;
}>;

export const ReportCard: FC<ReportCardProps> = props => {
  const {
    title,
    subtitle,
    description,
    descriptionTooltip,
    showEmpty = false,
    showError = false,
    loading = false,
    sx,
    children,
  } = props;

  const theme = useTheme();

  const showContent = !showEmpty && !showError;

  return (
    <HuCardContainer
      sx={{
        maxWidth: '1084px',
        width: '100%',
        '& > .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
          p: `${theme.spacing(3)} !important`,
        },
        ...sx,
      }}
    >
      <Stack
        id="report-card-header"
        sx={{
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
        }}
      >
        {loading && (
          <Stack
            sx={{
              flexDirection: 'column',
              alignItems: 'flex-start',
              justifyContent: 'center',
              gap: 1,
            }}
          >
            <HuSkeleton
              width={284}
              height={16}
            />
            <HuSkeleton
              width={411}
              height={16}
            />
          </Stack>
        )}
        {!loading && (
          <>
            <Typography
              variant="globalM"
              fontWeight="fontWeightSemiBold"
              color={theme.palette.textColors?.neutralText}
            >
              {title}
            </Typography>
            {subtitle && (
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
                color={theme.palette.textColors?.neutralTextLighter}
              >
                {subtitle}
              </Typography>
            )}
            {description && (
              <Typography
                variant="globalS"
                fontWeight="fontWeightSemiBold"
                color={theme.palette.textColors?.neutralTextLighter}
                sx={{
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'flex-start',
                  gap: 1,
                }}
              >
                {description}
                {descriptionTooltip && (
                  <HuTooltip
                    direction="bottom"
                    description={descriptionTooltip}
                  >
                    <IconInfoCircle
                      size={14}
                      color={theme.palette.textColors?.neutralTextLighter}
                    />
                  </HuTooltip>
                )}
              </Typography>
            )}
          </>
        )}
      </Stack>
      <Stack
        id="report-card-content"
        sx={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 1,
        }}
      >
        {showEmpty && <EmptyState />}
        {showError && <ErrorState />}
        {showContent && children}
      </Stack>
    </HuCardContainer>
  );
};

export default ReportCard;