Notes

import { useEffect, useState } from "react";
import useListMappedApi from "../../hooks/policies/useListMappedApi";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Loading,
Separator,
DataTable,
} from "@mfe/design-system";
import { TYPE_OPTIONS } from "../DecisionTreeDialog/constants";
import { ColumnDef } from "@tanstack/react-table";

type PolicyWorkflowResumeProps = {
policyId?: any;
};

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

const handleJSON = (json: string) => {
try {
return json ? (json[0] !== "[" ? `[${json}]` : json) : "[]";
} catch (e) {
console.error("Error parsing JSON", e);
return "[]";
}
};

const getJsonNullOrEmpty = (entry: any) => {
return Object.keys(entry).length <= 1;
};

const defaultColumns: ColumnDef<any>[] = [
{ accessorKey: "name", header: "Nome" },
{ accessorKey: "required", header: "Obrigatório" },
{ accessorKey: "type", header: "Tipo" },
];

const updatedPolicyColumns = defaultColumns.concat([
{ accessorKey: "condition", header: "Condição" },
{ accessorKey: "selectedValue", header: "Valor selecionado" },
]);

const handleApiParameters = (entry: any) => {
if (getJsonNullOrEmpty(entry)) return <h2>Sem entradas configuradas</h2>;

const data = entry.map((entry) => ({
name: entry.name ?? "Sem nome",
required: entry.required ? "Sim" : "Não",
type:
TYPE_OPTIONS.find((option) => option.value === entry.type)?.label ||
"Sem tipo",
}));

return data.length > 0 ? (
<DataTable data={data} columns={defaultColumns} paginate={false} />
) : (
<h2>Sem entradas configuradas</h2>
);
};

const handleApiOutputs = (entry: any) => {
let data = [];
if (entry.mappedApiOutputPolicy && entry.mappedApiOutputPolicy.length > 0) {
data = entry.mappedApiOutputPolicy.map((policy) => {
if (policy.mappedApiId === entry.id) {
const outputData = JSON.parse(policy.jsonOutputUpdated);
return outputData.map((output: any) => ({
name: output?.name ?? "Sem nome",
required: output?.required ? "Sim" : "Não",
type:
TYPE_OPTIONS.find((option) => option?.value === output?.type)
?.label || "Sem tipo",
condition: output?.condition ?? "Não definida",
selectedValue: output?.selectedValue ?? "Não selecionado",
}));
}
return null;
}).filter(item => item !== null).flat();
} else if (entry.mappedApiOutput && entry.mappedApiOutput.jsonOutput) {
const mappedApiOutpup = JSON.parse(handleJSON(entry.mappedApiOutput.jsonOutput));
if (getJsonNullOrEmpty(mappedApiOutpup)) return <h2>Sem saídas configuradas</h2>;

data = mappedApiOutpup.map((ouput) => ({
name: ouput.name ?? "Sem nome",
required: ouput.required ? "Sim" : "Não",
type:
TYPE_OPTIONS.find((option) => option.value === ouput.type)?.label ||
"Sem tipo",
condition: ouput.condition ?? "Não definida",
selectedValue: ouput.selectedValue ?? "Não selecionado",
}));
}

return data.length > 0 ? (
<DataTable data={data} columns={updatedPolicyColumns} paginate={false} />
) : (
<h2>Sem saídas configuradas</h2>
);
};

const renderJson = () => (
<div>
{processedApi?.map((item) => (
<div key={item.id}>
<p style={{ fontWeight: "700" }}>Produto: {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>
<div style={{ display: "grid", gridTemplateColumns: "1fr" }}>
{handleApiParameters(
JSON.parse(handleJSON(item.mappedApiParameters.jsonInput))
)}
</div>
</AccordionContent>
</AccordionItem>

<AccordionItem value={`item-${item.id}-2`}>
<AccordionTrigger>Saídas</AccordionTrigger>
<AccordionContent>
<div style={{ display: "grid", gridTemplateColumns: "1fr" }}>
{handleApiOutputs(item)}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
<Separator
style={{
height: "5px",
marginBottom: "15px",
backgroundColor: "#bbc5d3",
}}
/>
</div>
))}
</div>
);

useEffect(() => {
if (mappedApi) {
// Filtrando apenas os itens cujo id está presente em mappedApiOutputPolicy
const filteredApi = mappedApi.filter(api =>
api.mappedApiOutputPolicy?.some(
(policy) => policy.mappedApiId === api.id
)
);

const updatedApi = filteredApi.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 && isLoading ? <Loading /> : renderJson();
}