import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { type Theme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography/Typography';

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

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

import { type ApprovalStepCommentLine } from '../utils';

const CARD_STYLE = {
  backgroundColor: (theme: Theme) => theme.palette.new.background.elements.grey,
  borderColor: (theme: Theme) => theme.palette.new.background.elements.grey,
};

const OVERRIDE_INTRO_KEY: Record<
  NonNullable<ApprovalStepCommentLine['variant']>,
  string
> = {
  revoke: 'approval_requests:revoke_comment_intro',
  change_to_approved: 'approval_requests:change_to_approved_comment_intro',
};

type Props = {
  items: ApprovalStepCommentLine[];
};

const ResponseReasonCard = ({ items }: Props) => {
  const { t } = useLokaliseTranslation(['approval_requests']);

  const { overrideItems, restItems } = items.reduce<{
    overrideItems: ApprovalStepCommentLine[];
    restItems: ApprovalStepCommentLine[];
  }>(
    (acc, item) => {
      if (item.variant != null) {
        acc.overrideItems.push(item);
      } else {
        acc.restItems.push(item);
      }
      return acc;
    },
    { overrideItems: [], restItems: [] },
  );

  const renderItem = (item: ApprovalStepCommentLine) => {
    if (item.variant != null) {
      return (
        <Typography
          key={item.key}
          variant="globalXS"
        >
          <Typography
            component="span"
            variant="globalXS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t(OVERRIDE_INTRO_KEY[item.variant], { name: item.boldPrefix })}
          </Typography>
          {item.text && `: ${item.text}`}
        </Typography>
      );
    }

    const isStepKey = /^\d+$/.test(item.key);
    if (isStepKey) {
      return (
        <Typography
          key={item.key}
          variant="globalXS"
        >
          {`${item.key}. `}
          {item.boldPrefix && (
            <>
              <Typography
                component="span"
                variant="globalXS"
                sx={{ fontWeight: 'fontWeightSemiBold' }}
              >
                {item.boldPrefix}
              </Typography>
              {item.text && `: ${item.text}`}
            </>
          )}
          {!item.boldPrefix && item.text}
        </Typography>
      );
    }

    return (
      <Typography
        key={item.key}
        variant="globalXS"
      >
        {item.text}
      </Typography>
    );
  };

  return (
    <CardContainer
      fullWidth
      sx={CARD_STYLE}
    >
      <Stack sx={{ gap: 1 }}>
        <Typography
          variant="globalXXS"
          sx={{
            color: theme => theme.palette.new.text.neutral.lighter,
          }}
        >
          {t('approval_requests:response_reason')}
        </Typography>
        <Stack sx={{ gap: 0.5 }}>
          {overrideItems.map(renderItem)}
          {overrideItems.length > 0 && restItems.length > 0 && (
            <Divider
              sx={{
                my: 2,
                borderColor: theme => theme.palette.new.border.neutral.default,
              }}
            />
          )}
          {restItems.map(renderItem)}
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default ResponseReasonCard;