import { IconFont } from '@/components/icon-font'; import { Card, CardContent } from '@/components/ui/card'; import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow'; import { NodeProps, Position } from '@xyflow/react'; import { memo, useCallback } from 'react'; import { SwitchOperatorOptions } from '../../constant'; import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query'; import { CommonHandle } from './handle'; import { RightHandleStyle } from './handle-icon'; import NodeHeader from './node-header'; import { NodeWrapper } from './node-wrapper'; import { ToolBar } from './toolbar'; import { useBuildSwitchHandlePositions } from './use-build-switch-handle-positions'; const getConditionKey = (idx: number, length: number) => { if (idx === 0 && length !== 1) { return 'If'; } else if (idx === length - 1) { return 'Else'; } return 'ElseIf'; }; const ConditionBlock = ({ condition, nodeId, }: { condition: ISwitchCondition; nodeId: string; }) => { const items = condition?.items ?? []; const getLabel = useGetComponentLabelByValue(nodeId); const renderOperatorIcon = useCallback((operator?: string) => { const name = SwitchOperatorOptions.find((x) => x.value === operator)?.icon; return ; }, []); return ( {items.map((x, idx) => ( {getLabel(x?.cpn_id)} {renderOperatorIcon(x?.operator)} {x?.value} ))} ); }; function InnerSwitchNode({ id, data, selected }: NodeProps) { const { positions } = useBuildSwitchHandlePositions({ data, id }); return ( {positions.map((position, idx) => { return ( {idx < positions.length - 1 && position.condition?.logical_operator?.toUpperCase()} {getConditionKey(idx, positions.length)} {position.condition && ( )} ); })} ); } export const SwitchNode = memo(InnerSwitchNode);