Notes

import { useEffect, useState } from "react";
import useListMappedApi from "../../hooks/policies/useListMappedApi";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Input,
} from "@mfe/design-system";

const CONDITION_OPTIONS = [
{ value: "maior", label: "maior que" },
{ value: "maior-igual", label: "maior ou igual" },
{ value: "igual", label: "igual a" },
{ value: "menor", label: "menor que" },
{ value: "menor-igual", label: "menor ou igual" },
{ value: "existe", label: "existe" },
{ value: "nao-existe", label: "não existe" },
];

type PolicyWorkflowResumeProps = {
policyId?: any;
};

export default function PolicyWorkflowResume({ policyId }: PolicyWorkflowResumeProps) {
const [processedApi, setProcessedApi] = useState(null);
const { data: mappedApi } = useListMappedApi(policyId);

// Função para garantir que o JSON seja sempre uma lista
const handleJSON = (json: string) => {
try {
return json ? (json[0] !== "[" ? `[${json}]` : json) : "[]";
} catch (e) {
console.error("Error parsing JSON", e);
return "[]";
}
};

// Função para renderizar os inputs
const RenderInput = ({ label, value }: { label: string; value: string }) => (
<Input label={label} value={value || "Sem valor definido"} className="entry-text" disabled />
);

// Função para processar as entradas da API
const handleApiParameters = (entry) => (
<>
<h2 className="entry-text">{entry.name}</h2>
<RenderInput label="Nome" value={entry.type} />
<RenderInput label="Obrigatório" value={entry.required ? "Campo obrigatório" : "Campo opcional"} />
</>
);

// Função para processar as saídas da API
const handleApiOutputs = (entry) => {
console.log("Rendering output for", entry); // Verificação
return (
<div className="entry-container">
<h2 className="entry-text">{entry.name}</h2>
<RenderInput label="Nome" value={entry.type} />
<RenderInput label="Valor de entrada" value={entry.inputValue} />
{entry.condition && (
<RenderInput
label="Condição"
value={CONDITION_OPTIONS.find((option) => option.value === entry.condition)?.label || "Sem condição"}
/>
)}
<RenderInput label="Valor Selecionado" value={entry.selectedValue} />
</div>
);
};

// Função para processar e renderizar as APIs
const renderJson = () => (
<div>
{processedApi?.map((item) => (
<div key={item.id}>
<p>API: {item.name}</p>
<Accordion type="single" collapsible className="accordion">
<AccordionItem value={`item-${item.id}-1`}>
<AccordionTrigger>
<div className="flex gap-1">Entradas</div>
</AccordionTrigger>
<AccordionContent>
{JSON.parse(handleJSON(item.mappedApiParameters.jsonInput)).map(handleApiParameters)}
</AccordionContent>
</AccordionItem>

<AccordionItem value={`item-${item.id}-2`}>
<AccordionTrigger>Saídas</AccordionTrigger>
<AccordionContent>
{/* Se houver mappedApiOutputPolicy, renderiza as políticas; caso contrário, renderiza mappedApiOutput */}
{item.mappedApiOutputPolicy && item.mappedApiOutputPolicy.length > 0
? item.mappedApiOutputPolicy.map((policy) => {
console.log("Policy", policy); // Verifique se a política está sendo processada corretamente
return JSON.parse(handleJSON(policy.jsonOutputUpdated)).map(handleApiOutputs);
})
: JSON.parse(handleJSON(item.mappedApiOutput.jsonOutput)).map(handleApiOutputs)}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
))}
</div>
);

// Processamento dos dados assim que eles são recebidos
useEffect(() => {
if (mappedApi) {
const updatedApi = mappedApi.map((api) => {
api.mappedApiParameters.jsonInput = handleJSON(api.mappedApiParameters.jsonInput);
api.mappedApiOutput.jsonOutput = handleJSON(api.mappedApiOutput.jsonOutput);
if (api.mappedApiOutputPolicy) {
api.mappedApiOutputPolicy = api.mappedApiOutputPolicy.map((policy) => {
policy.jsonOutputUpdated = handleJSON(policy.jsonOutputUpdated);
return policy;
});
}
return api;
});
setProcessedApi(updatedApi);
}
}, [mappedApi]);

return processedApi ? renderJson() : <div>Carregando...</div>;
}