// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from 'react';
import { FieldValueList, Text } from '@pega/cosmos-react-core';
import type { PConnProps } from './PConnProps';

interface HighlightRenderProps extends PConnProps {
  field?: any;
}

const HighlightRender = (props: HighlightRenderProps) => {
  const { getPConnect, field } = props;

  field.config['displayMode'] = 'DISPLAY_ONLY';

  // Mark as status display when using pyStatusWork
  if (field.config?.value === '@P .pyStatusWork') {
    field.type = 'TextInput';
    field.config.displayAsStatus = true;
  }

  const configProps: any = getPConnect().resolveConfigProps(field.config);

  // @ts-ignore
  const reactField = getPConnect().createComponent(field);

  return (
{{! pick new delimiters for mustache }}
{{=<% %>=}}
    <FieldValueList
      style={{ width: 'auto' }}
      variant='stacked'
      data-testid={field.testId}
      fields={[
        {
          id: '2',
          name: configProps.hideLabel ? '' : configProps.label,
          value: (
            <Text variant='h1' as='span'>
              {reactField}
            </Text>
          )
        }
      ]}
    />
<%={{ }}=%>     {{! revert delimiters for mustache }}
  );
};

export default HighlightRender;