/* eslint-disable react/prop-types */
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box, Stack, SxProps } from '@mui/material';
import { useContext } from 'react';
import type { ReactNode } from 'react';
import { getWordBreakStyle } from '@blocklet/payment-react';
import { isEmptyExceptNumber } from '../libs/util';
import { InfoRowGroupContext } from '../contexts/info-row';

type Props = {
  label: string | ReactNode;
  value?: string | ReactNode;
  alignItems?: string;
  sizes?: [number, number];
  direction?: 'row' | 'column';
  sx?: SxProps;
  showLabel?: boolean;
};

export default function InfoRow(rawProps: Props) {
  const props = Object.assign(
    {
      value: undefined,
      sizes: [1, 3],
      alignItems: 'center',
      direction: 'row',
      sx: {},
      showLabel: true,
    },
    rawProps
  );
  const { t } = useLocaleContext();
  const isNone = isEmptyExceptNumber(props.value);
  const sizes = props.sizes || [1, 3];
  const inGroup = useContext(InfoRowGroupContext);
  return (
    <Stack
      direction={props.direction || 'row'}
      className="info-row-wrapper"
      sx={{
        alignItems: props.alignItems,
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        gap: 1,
        mb: 2,
        ...props.sx,

        a: {
          color: 'text.link',
        },
      }}>
      {props.showLabel && (
        <Box
          className="info-row-label"
          sx={{
            color: 'text.primary',
            fontSize: 14,
            flex: props.direction === 'column' ? 'none' : sizes[0],
            mb: props.direction === 'column' ? 0.5 : 0,

            ...(inGroup && {
              flex: 'none',
              whiteSpace: 'nowrap',
            }),

            fontWeight: {
              xs: 500,
              md: 400,
            },
          }}>
          {props.label}
        </Box>
      )}
      <Box
        className="info-row-value"
        sx={{
          flex: sizes[1],
          color: isNone ? 'text.disabled' : 'text.secondary',
          fontSize: 14,
          wordBreak: getWordBreakStyle(props.value),
        }}>
        {isNone ? t('common.none') : props.value}
      </Box>
    </Stack>
  );
}

// Add display name for identification
InfoRow.displayName = 'InfoRow';
