react-flow/src/nodes/NoteFlow.tsx

import { useState,useCallback } from 'react';
import {ReactFlow, addEdge, Controls, Background, MarkerType  } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { FiUser, FiMail, FiCheckCircle,FiList } from 'react-icons/fi';
import {FaShuffle  } from "react-icons/fa6";


const initialNode = {
  id: '1',
  type: 'input',
  data: { 
      label: (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <FiUser style={{ marginRight: 5 }} />
           <span>Customer signs up for product updates</span>
        </div>
      ) 
    },
    position: { x: 250, y: 100 },
};

const tabBarOptions = [
    { 
    label: 'Send email', 
    id: '2',
    type: '',
    html:  (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            <FiMail style={{ marginRight: 5 }} />
            Send email
        </div>
        ),
        position: { x: 250, y: 200 },
    },
    {
    label: 'Replied to conversation?', 
    id: '3',
    type: '',
    html: (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            <FaShuffle style={{ marginRight: 5, transform:`rotate(90deg)`  }} />
            <span>Replied to conversation?</span>
        </div>
      ),
      position: { x: 250, y: 290 },
    },
    { 
        label: 'Send survey', 
        id: '4',
        type: 'output',
        html: (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <FiCheckCircle style={{ marginRight: 5 }} />
          Send survey
        </div>
      ),
      position: { x: 100, y: 400 },
    },
    { 
        label: 'Contact Exists', 
        id: '5',
        type: 'output',
        html: (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <FiList  style={{ marginRight: 5 }} />
          Contact Exits
        </div>
      ),
       position: { x: 400, y: 400 },
    },
];

// Nội dung popup cho mỗi node
const nodeContents = {
  '2': `
    <label for="email-subject">Subject:</label>
    <input type="text" id="email-subject" name="email-subject" placeholder="Enter subject">
    <label for="email-body">Body:</label>
    <textarea id="email-body" name="email-body" rows="4" placeholder="Enter email body"></textarea>
  `,
  '1': `
    <label for="customer-name">Customer Name:</label>
    <input type="text" id="customer-name" name="customer-name" placeholder="Enter customer name">
    <label for="customer-email">Customer Email:</label>
    <input type="email" id="customer-email" name="customer-email" placeholder="Enter customer email">
  `,
  '3': `
    <label for="reply-status">Reply Status:</label>
    <select id="reply-status" name="reply-status">
      <option value="replied">Replied</option>
      <option value="not-replied">Not Replied</option>
    </select>
  `,
  '5': `
    <label for="contact-id">Contact ID:</label>
    <input type="text" id="contact-id" name="contact-id" placeholder="Enter contact ID">
  `,
  '4': `
    <label for="survey-question">Survey Question:</label>
    <input type="text" id="survey-question" name="survey-question" placeholder="Enter survey question">
    <label for="survey-options">Options (comma-separated):</label>
    <input type="text" id="survey-options" name="survey-options" placeholder="Option 1, Option 2, ...">
  `
};


const NoteFlow = () => {
  const [nodes, setNodes] = useState([initialNode]);
  const [edges, setEdges] = useState([]);
  const [showTabBar, setShowTabBar] = useState(false);
  const [lastNodeId, setLastNodeId] = useState('1');
  const [showAdditionalOptions, setShowAdditionalOptions] = useState(false);
  const [selectedNodeContent, setSelectedNodeContent] = useState('');
  const [showPopup, setShowPopup] = useState(false);
  const [nodeToDelete, setNodeToDelete] = useState(null);

  const handleAddNoteClick = () => {
    setShowTabBar(true);
  };

  const handleTabClick = (option) => {
    setShowTabBar(false);
    const newNode = {
      id: option.id,
      data: { label: option.html },
      position: { x: option.position.x, y: option.position.y },
    };

    setNodes((nds) => [...nds, newNode]);
    setEdges((eds) => addEdge({ id: `e${lastNodeId}-${option.id}`, source: lastNodeId, target: option.id, animated: false }, eds));
    setLastNodeId(option.id);

    

    if (option.id === '3') {
      const yesNode = {
        id: '4',
        type: 'output',
        data: { label:  (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <FiCheckCircle style={{ marginRight: 5 }} />
          Send survey
        </div>
      ) },
        position: { x: 100, y: 400 },
      };

      const noNode = {
        id: '5',
        type: 'output',
        data: { label: (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <FiList  style={{ marginRight: 5 }} />
          Contact Exits
        </div>
      ) },
        position: { x: 400, y: 400 },
      };

      setNodes((nds) => [...nds, yesNode, noNode]);

      setEdges((eds) => [
        ...eds,
        { id: 'e3-4', source: '3', target: '4', label: 'yes', animated: false,},
        { id: 'e3-5', source: '3', target: '5', label: 'no', animated: false},
      ]);
    }
  };

  const handleAdditionalOptionClick = (option) => {
    setShowAdditionalOptions(false);

    const surveyNode = {
      id: option.id,
      data: { label: 'Send survey' },
      position: { x: 100, y: 150 * (nodes.length + 1) },
    };

    const contactExistsNode = {
      id: '5',
      data: { label: 'Contact Exists' },
      position: { x: 400, y: 150 * (nodes.length + 1) },
    };

    setNodes((nds) => [...nds, surveyNode, contactExistsNode]);

    setEdges((eds) => [
      ...eds,
      { id: `e${lastNodeId}-${option.id}`, source: lastNodeId, target: option.id, label: 'yes', animated: true },
      { id: `e${option.id}-5`, source: option.id, target: '5', label: 'no', animated: true },
    ]);
  };

  const onNodeClick = (event, node) => {
    const content = nodeContents[node.id];
    setSelectedNodeContent(content);
    setShowPopup(true);
   
  };

  const hideenPopup = () => {
    setShowPopup(false);
  }

  const onConnect = (params) => setEdges((eds) => addEdge(params, eds));

  const onNodeContextMenu = useCallback((event, node) => {
    event.preventDefault(); // Ngăn không cho menu chuột phải mặc định hiện ra
    setNodeToDelete(node);
  }, []);

  const handleNodeDelete = () => {
    if (nodeToDelete) {
      setNodes((nds) => nds.filter((node) => node.id !== nodeToDelete.id));
      setEdges((eds) => eds.filter((edge) => edge.source !== nodeToDelete.id && edge.target !== nodeToDelete.id));
      setNodeToDelete(null);
    }
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} onNodeClick={onNodeClick}  onNodeContextMenu={onNodeContextMenu}>
        <Controls />
        <Background  />
      </ReactFlow>
      <button
        onClick={handleAddNoteClick}
        style={{
          position: 'absolute',
          top: 10,
          left: 10,
          zIndex: 10,
          padding: '10px',
        }}
      >
        Add Note
      </button>
      {showTabBar && (
        <div
          style={{
            position: 'absolute',
            top: 50,
            left: 10,
            zIndex: 10,
            background: 'white',
            border: '1px solid #ccc',
            padding: '10px',
          }}
        >
          {tabBarOptions.map((option) => (
            <div
              key={option.id}
              onClick={() => handleTabClick(option)}
              style={{
                padding: '10px',
                cursor: 'pointer',
                borderBottom: '1px solid #ddd',
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
      {showAdditionalOptions && (
        <div className='popup'
        >
          {additionalOptions.map((option) => (
            <div
              key={option.id}
              onClick={() => handleAdditionalOptionClick(option)}
              style={{
                padding: '10px',
                cursor: 'pointer',
                borderBottom: '1px solid #ddd',
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
      {showPopup && (
        <>
        <div className="popup-overlay" onClick={hideenPopup}></div>
        <div
         className={`popup global-popup ${showPopup ? '' : 'hidden'}`}
        >
          <div className="popup-content">
            <div  className="conent-form">
              <form>
                <div dangerouslySetInnerHTML={{ __html: selectedNodeContent }} />
                <button onClick={hideenPopup}>Close</button>
              </form>
            </div>
          </div>
        </div>
        </>
      )}
       {nodeToDelete && (
        <div
          style={{
            position: 'absolute',
            top: nodeToDelete.position.y - 12,
            left: nodeToDelete.position.x + 260,
            zIndex: 10,
          }}
        >
          <button
            onClick={handleNodeDelete}
            style={{
              background: 'red',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            X
          </button>
        </div>
      )}
    </div>
  );
};

export default NoteFlow;