If node

if-node.ts

import { memo } from 'react';
import { Handle, Position } from 'reactflow';
import { nodesConfigs } from '@/routes/dashboard.whatsapp';
import { NodeBase, NodeDescription, NodeTitle } from './node-base';
import { MessagesPreview } from './messages-preview/messages-preview';
import { decisionAlternatives } from '@/components/whatsap-flow/alternatives-alternatives-if-node-message/alternatives-alternatives-if-node-message';
import Divider from '@/components/ui/divider';
import { Icons } from '@/components/icons/icons';

function IfNode({ data, id, ...props }) {
  const nodeConfig = nodesConfigs['IF'];
  const bgColor = nodeConfig.bgColor || 'red'
  const textColor = nodeConfig.textColor || 'red'

  return (
    <div className="shadow-md bg-white rounded-xl w-72 relative">
      <span className='flex flex-col flex-grow text-xs border-t-xl'>
        <NodeTitle bgColor={bgColor} textColor={textColor} nodeConfig={nodeConfig} /> 
        <NodeDescription data={data}/>

        <span className='p-2'>
          <MessagesPreview data={data} className='p-2'/>
        </span>
      </span>

      <div className=''>
        {data?.messages?.map((message, index) => (
          message.node_message_type !== 'IF' ? '' : (
            <div key={index} className='my-2 relative px-3'>
              <span className="flex flex-col">
                <div className="bg-blue-100 py-2 pl-2 mb-1">
                  <span className='text-xs w-full'>Verifica se a variável:</span>
                </div>

                <div className="flex justify-end pr-2 flex">
                  <span className="grow pl-2 mb-1">
                    {/* {message.id} */}
                    {/* <pre>{JSON.stringify(message, null, 2)}</pre> */}
                    {message.variable_name ? <span className='text-xs bg-blue-200 p-1 rounded-xl px-2'>{message.variable_name || 'Variável'}</span> : '' }
                    {!message.variable_name ? <span className='text-xs bg-red-200 p-1 rounded-xl px-2 pt-1'>Variável</span> : '' }
                  </span>
                  <span className="grow">
                  </span>
                  <span className="flex pr-2 ">
                    <Icons.RigthIcon className="w-4 mr-2"/>
                    <span className='text-xs bg-green-200 rounded-xl px-2 pt-1'>
                      {decisionAlternatives[message.value]}
                    </span>
                  </span>
                </div>

                <Handle
                  type="source"
                  position={Position.Right}
                  id={message.id}
                  style={{ width: '20px', height: '20px', right: '-10px' }} // Move handle outside
                  className="!bg-gray-700"
                />
                <Divider className="mt-1"/>
              </span>
            </div>
          )
        ))}
      </div>

      <div className="absolute top-1/2 left-0 transform -translate-y-1/2 -ml-3">
        <Handle type="target" position={Position.Left} style={{ width: '20px', height: '20px' }} className="!bg-gray-600"/>
      </div>
    </div>
  );
}

function _IfNode ({...props}) {
  return (
    <NodeBase
      onClone={props.onClone}
      onEdit={props.onEdit}
      onRemoveNode={props.onRemoveNode}
      id={props.id}
      {...props}
    >
      <IfNode data={props.data} id={props.id} {...props} />
    </NodeBase>
  );
}

export default memo(_IfNode);