import Grid2 from '@mui/material/Grid2';
import Typography from '@mui/material/Typography';
import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

interface SingleReferenceReadOnlyProps extends PConnProps {
  // If any, enter additional props that only exist on this component
  config: any;
  displayAs?: string;
  ruleClass?: string;
  label?: string;
  displayMode?: string;
  type: string;
  referenceType?: string;
  hideLabel?: boolean;
  dataRelationshipContext?: string;
}

export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyProps) {
  const {
    getPConnect,
    displayAs = '',
    ruleClass = '',
    label = '',
    type = '',
    displayMode = '',
    referenceType = '',
    hideLabel = false,
    dataRelationshipContext = null,
    config
  } = props;

  const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown'];

  if (editableComponents.includes(type)) {
    config.caseClass = ruleClass;
    config.text = config.primaryField;
    config.caseID = config.value;
    config.contextPage = `@P .${dataRelationshipContext}`;
    config.resourceParams = {
      workID: displayAs === 'table' ? config.selectionKey : config.value
    };
    config.resourcePayload = {
      caseClassName: ruleClass
    };
  }

  const component = getPConnect().createComponent(
    {
      type: 'SemanticLink',
      config: {
        ...config,
        label,
        displayMode,
        referenceType,
        hideLabel,
        dataRelationshipContext
      }
    },
    '',
    0,
    {}
  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional

  return (
    <Grid2 container spacing={4} justifyContent='space-between'>
      {!hideLabel && (
        <Grid2 size={{ xs: 4 }}>
          <Typography variant='body2' component='span' sx={{ fontWeight: 400, color: 'text.secondary' }}>
            {label}
          </Typography>
        </Grid2>
      )}
      <Grid2 size={{ xs: hideLabel ? 12 : 8 }}>{component}</Grid2>
    </Grid2>
  );
}
