import React from 'react';
import { capitalize } from 'lodash';
import type { PydanticFormElement } from 'pydantic-forms';
import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
import { useWithOrchestratorTheme } from '@/hooks';
import { snakeToHuman } from '@/utils';
import { getCommonFormFieldStyles, summaryFieldStyles } from './styles';
import { getNestedSummaryLabel } from './wfoPydanticFormUtils';
export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
const { id, title, description } = pydanticFormField;
const uniforms = pydanticFormField.schema.uniforms;
const summaryData = uniforms?.data as unknown as {
headers: string[][];
labels: string[];
columns: string[][];
};
const headers = summaryData?.headers as string[][];
const labels = summaryData?.labels as string[];
const columns = summaryData?.columns || [];
const extraColumnsData = columns.filter((_, index) => index !== 0);
const rows = columns[0].map((row, index) => (
{labels && (
|
{getNestedSummaryLabel(labels, index)}
|
)}
{typeof row === 'string' && row.includes('') ? (
) : (
row
)}
|
{extraColumnsData &&
extraColumnsData.map((_, idx) => (
{extraColumnsData[idx][index]?.toString()}
|
))}
));
const tableHeader =
!headers || headers.length === 0 ? null : (
{labels && | }
{headers.map((header, idx) => (
{header} |
))}
);
const formattedTitle = snakeToHuman(capitalize(title ?? ''));
return (
{formattedTitle}}
labelAppend={{description}}
id={id}
fullWidth
>
);
};