react-flow/src/nodes/NoteFlow.tsx

import { useState,useCallback } from 'react';
import { ReactFlow, addEdge, Controls, Background } 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 initialNodes = [
  {
    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 },
  },
  {
    id: '2',
    data: { label: 'Add Note' },
    position: { x: 250, y: 250 },
  },
];

// nội dung tabbar
const tabBarOptions = [
  {
    label: 'Send email',
    id: '3',
    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: '4',
    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: '5',
    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: '6',
    type: 'output',
    html: (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <FiList style={{ marginRight: 5 }} />
        Contact Exists
      </div>
    ),
    position: { x: 400, y: 400 },
  },
];

// Nội dung 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(initialNodes);
  const [edges, setEdges] = useState([
    { id: 'e1-2', source: '1', target: '2' }, // Kết nối node "Add Note" với node mặc định ban đầu
  ]);
  const [showTabBar, setShowTabBar] = useState(false);
  const [lastNodeId, setLastNodeId] = useState('1');
  const [selectedNodeId, setSelectedNodeId] = useState(null); // Theo dõi node đã chọn
  const [nodeToDelete, setNodeToDelete] = useState(null);
  const [showPopup, setShowPopup] = useState(false);
  const [selectedNodeContent, setSelectedNodeContent] = useState('');



  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 },
    };

    const addNoteNode = nodes.find((node) => node.id === '2');

    // Xóa node "Add Note" nếu chọn "Replied to conversation?"
    if (option.id === '4') {
      setNodes((nds) => nds.filter((node) => node.id !== '2'));

      // Thêm node "Replied to conversation?"
      const repliedNode = {
        id: '4',
        data: { label: option.html },
        position: { x: option.position.x, y: option.position.y },
      };

      // Thêm các nhánh "Send survey" và "Contact Exists"
      const yesNode = {
        id: '5',
        type: 'output',
        data: {
          label: (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <FiCheckCircle style={{ marginRight: 5 }} />
              Send survey
            </div>
          ),
        },
        position: { x: option.position.x - 150, y: option.position.y + 150 },
      };

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

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


      setEdges((eds) => [
        ...eds,
        { id: 'e4-5', source: '4', target: '5', label: 'yes', animated: false },
        { id: 'e4-6', source: '4', target: '6', label: 'no', animated: false },
        { id: `e${lastNodeId}-4`, source: lastNodeId, target: '4' }, // Kết nối node hiện tại với "Replied to conversation?"
      ]);
    } else {
      if (addNoteNode) {
        // Di chuyển node "Add Note" xuống dưới node mới
        setNodes((nds) =>
          nds.map((node) =>
            node.id === '2'
              ? { ...node, position: { x: option.position.x, y: option.position.y + 150 } }
              : node
          )
        );
      }

      // Thêm node mới vào danh sách node
      setNodes((nds) => [...nds, newNode]);

      // Kết nối node mới với node hiện tại
      setEdges((eds) => addEdge({ id: `e${lastNodeId}-${option.id}`, source: lastNodeId, target: option.id }, eds));

      // Kết nối node "Add Note" cũ với node mới
      if (addNoteNode) {
        setEdges((eds) => addEdge({ id: `e${option.id}-2`, source: option.id, target: '2' }, eds));
      }

      // Cập nhật lastNodeId
      setLastNodeId(option.id);
    }

    // Cập nhật selectedNodeId với ID của node được chọn
    setSelectedNodeId(option.id);
  };

  const onNodeClick = (event, node) => {
    if (node.id === '2') { // Check if the clicked node is "Add Note"
      setShowTabBar(true);
    }
  };

  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);
    }
  };


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

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

  return (
    <div style={{ height: '100vh', width: '100%', position: 'relative' }}>
      <ReactFlow nodes={nodes} edges={edges} onNodeClick={onNodeClick} onNodeContextMenu={onNodeContextMenu} onNodeDoubleClick={onNodeDoubleClick}>
        <Controls />
        <Background />
      </ReactFlow>
      {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: selectedNodeId === option.id ? 'not-allowed' : 'pointer',
                opacity: selectedNodeId === option.id ? 0.5 : 1, // Làm mờ các node đã chọn
                borderBottom: '1px solid #ddd',
              }}
            >
              {option.label}
            </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>
      )}
      {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={() => setShowPopup(false)}>Close</button>
              </form>
            </div>
          </div>
        </div>
        </>
      )}
    </div>
  );
};

export default NoteFlow;