import { type TablerIcon } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { type SummaryItem } from '../../../shared/summaryTypes';

type SummaryItemRowProps = {
  item: SummaryItem;
  showDivider?: boolean;
};

export const SummaryItemRow = ({
  item,
  showDivider = false,
}: SummaryItemRowProps) => {
  const isObjectAnswer = item.answer && typeof item.answer === 'object';
  const Icon = isObjectAnswer ? (item.answer as TablerIcon) : null;

  return (
    <Stack>
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          py: 1,
        }}
      >
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          sx={{ maxWidth: 304 }}
        >
          {item.name}
        </Typography>
        {Icon ? (
          <Icon />
        ) : (
          <Stack sx={{ maxWidth: 432, overflow: 'hidden' }}>
            <Typography
              variant="globalS"
              sx={{
                // See StepMultipleSummary/ItemsList for the rationale
                // behind `direction: rtl` + `unicode-bidi: plaintext` —
                // it keeps the "…" inside the visible clipping box.
                direction: 'rtl',
                unicodeBidi: 'plaintext',
                display: '-webkit-box',
                WebkitLineClamp: 4,
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
              }}
            >
              {typeof item.answer === 'string' && item.answer.length > 0
                ? item.answer
                : '-'}
            </Typography>
          </Stack>
        )}
      </Stack>
      {showDivider && <Divider sx={{ mt: 1 }} />}
    </Stack>
  );
};