import type { PropsWithChildren, ReactElement } from 'react';
import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

interface CaseSummaryProps extends PConnProps {
  arPrimaryFields: any[];
  arSecondaryFields: any[];
  // If any, enter additional props that only exist on this component
}

export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
  // Get emitted components from map (so we can get any override that may exist)
  const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');

  const { getPConnect, children } = props;
  let { arPrimaryFields = [], arSecondaryFields = [] } = props;

  const thePConn = getPConnect && getPConnect();
  const theConfigProps: any = thePConn?.getConfigProps();

  const status = theConfigProps?.status;
  const showStatus = theConfigProps?.showStatus;
  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
  const localeCategory = 'ModalContainer';

  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
    const { config, children } = pConnectMeta;
    const pConnect = getPConnect();

    const caseSummaryComponentObject: any = {};

    const { type } = pConnectMeta;
    const createdComponent = pConnect.createComponent({
      type,
      children: children ? [...children] : [],
      config: {
        ...config
      }
    });

    caseSummaryComponentObject.value = createdComponent;
    return caseSummaryComponentObject;
  }

  function prepareCaseSummaryData(summaryFieldChildren) {
    const convertChildrenToSummaryData = kid => {
      return kid?.map((childItem, index) => {
        const childMeta = childItem.getPConnect().meta;
        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
        caseSummaryComponentObject.id = index + 1;
        return caseSummaryComponentObject;
      });
    };
    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
  }

  if (arPrimaryFields.length === 0 && arSecondaryFields.length === 0) {
    for (const child of children as ReactElement[]) {
      const childPConn = (child as ReactElement).props.getPConnect();
      const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
      if (childPConnData.name.toLowerCase() === 'primary fields') {
        arPrimaryFields = childPConnData.children;
        arPrimaryFields.forEach(field => {
          if (field.config?.value && typeof field.config?.value === 'string') {
            field.config.value = localizedVal(field.config.value, localeCategory);
          }
        });
      } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
        const secondarySummaryFields = prepareCaseSummaryData(childPConn);
        arSecondaryFields = childPConnData.children;
        arSecondaryFields.forEach((field, index) => {
          field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
        });
      }
    }
  }

  return (
    <div id='CaseSummary'>
      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
      <CaseSummaryFields theFields={arSecondaryFields} />
    </div>
  );
}