import { forwardRef } from 'react';

import { IconDownload } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTooltip from '@material-hu/components/design-system/Tooltip';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type InsightsCardContainerProps = {
  title: string;
  description?: string;
  children: React.ReactNode;
  onDownload: () => void;
  isDownloadingReport: boolean;
};

const ICON_BUTTON_SIZE = 40;

const InsightsCardContainer = forwardRef<
  typeof Box,
  InsightsCardContainerProps
>(function InsightsCardContainerComponent(props, ref) {
  const { title, description, children, onDownload, isDownloadingReport } =
    props;

  const { t } = useTranslation('post');

  return (
    <HuCardContainer sx={{ width: '100%', p: 1 }}>
      <Box ref={ref}>
        <Stack sx={{ mb: description ? 3 : 2 }}>
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <Typography
              variant="globalM"
              fontWeight="fontWeightSemiBold"
            >
              {title}
            </Typography>
            <HuTooltip
              description={t('download_excel')}
              direction="bottom"
            >
              <span>
                <IconButton
                  aria-label={t('download_excel')}
                  disabled={isDownloadingReport}
                  onClick={onDownload}
                  variant="secondary"
                >
                  <IconDownload />
                </IconButton>
              </span>
            </HuTooltip>
          </Stack>
          {description && (
            <Typography
              variant="globalS"
              color={theme => theme.palette.new.text.neutral.lighter}
              width={`calc(100% - ${ICON_BUTTON_SIZE}px)`}
            >
              {description}
            </Typography>
          )}
        </Stack>
        {children}
      </Box>
    </HuCardContainer>
  );
});

export default InsightsCardContainer;