import { type ReactNode } from 'react';

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

function summaryRowNeutralColor(
  theme: Theme,
  emphasized: boolean,
  whenNotEmphasized: 'lighter' | 'default',
) {
  return emphasized
    ? theme.palette.new.text.neutral.brand
    : theme.palette.new.text.neutral[whenNotEmphasized];
}

export type ConfirmSummaryRowProps = {
  label: ReactNode;
  value: ReactNode;
  emphasized?: boolean;
  withDivider?: boolean;
};

export const ConfirmSummaryRow = ({
  label,
  value,
  emphasized = false,
  withDivider = false,
}: ConfirmSummaryRowProps) => (
  <Stack
    sx={{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 1,
      py: 1.5,
      px: 2,
      ...(withDivider
        ? {
            borderBottom: 1,
            borderBottomColor: theme =>
              theme.palette.new.border.neutral.divider,
          }
        : {}),
    }}
  >
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
        minWidth: 0,
        gap: 0.5,
      }}
    >
      {typeof label === 'string' && (
        <Typography
          variant="globalM"
          sx={{
            color: theme =>
              summaryRowNeutralColor(theme, emphasized, 'lighter'),
            fontWeight: emphasized ? 'fontWeightBold' : undefined,
          }}
        >
          {label}
        </Typography>
      )}
      {typeof label !== 'string' && label}
    </Stack>
    <Typography
      component="div"
      variant="globalM"
      sx={{
        fontWeight: 'fontWeightBold',
        color: theme => summaryRowNeutralColor(theme, emphasized, 'default'),
      }}
    >
      {value}
    </Typography>
  </Stack>
);