import { InfoOutlined } from '@mui/icons-material';
import { Divider, Stack, Tooltip, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { isEmptyExceptNumber } from '../libs/util';

type Props = {
  label: string | React.ReactNode;
  value: string | React.ReactNode;
  tip?: string | React.ReactNode;
  divider?: boolean;
};

export default function InfoMetric(rawProps: Props) {
  const props = Object.assign(
    {
      tip: '',
      divider: false,
    },
    rawProps
  );

  const stackSx = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
  };

  const { t } = useLocaleContext();
  // eslint-disable-next-line react/prop-types
  const isNone = isEmptyExceptNumber(props.value);
  return (
    <>
      <Stack sx={stackSx}>
        <Typography
          className="info-metric-label"
          component="div"
          variant="subtitle2"
          mb={1}
          color="text.primary"
          sx={{
            display: 'flex',
            alignItems: 'center',
          }}>
          {/* eslint-disable-next-line react/prop-types */}
          {props.label}
          {/* eslint-disable-next-line react/prop-types */}
          {/* eslint-disable-next-line react/prop-types */}
          {!!props.tip && (
            // eslint-disable-next-line react/prop-types
            <Tooltip title={props.tip}>
              <InfoOutlined sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: 'medium', ml: 0.5 }} />
            </Tooltip>
          )}
        </Typography>
        <Typography
          className="info-metric-value"
          component="div"
          variant="body1"
          color={isNone ? 'text.disabled' : 'text.secondary'}
          sx={{ width: '100%', minHeight: '24px' }}>
          {/* eslint-disable-next-line react/prop-types */}
          {isNone ? t('common.none') : props.value}
        </Typography>
      </Stack>
      {/* eslint-disable-next-line react/prop-types */}
      {props.divider && <Divider orientation="vertical" flexItem />}
    </>
  );
}
