"use strict";
let lastCreatedNodeId = 1;
let lastLargeNodeId = null;
// Define node content mappings
const nodeContents = {
    'sendEmailNode': `
        <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>
    `,
    'customerSignsUpNode': `
        <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">
    `,
    'repliedToConversationNode': `
        <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>
    `,
    'contactExitsNode': `
        <label for="contact-id">Contact ID:</label>
        <input type="text" id="contact-id" name="contact-id" placeholder="Enter contact ID">
    `,
    'sendSurveyNode': `
        <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, ...">
    `
};
// Function to show the popup with node information
function showPopup(nodeId) {
    const popup = document.getElementById('popup-form');
    const nodeInfoElement = document.getElementById('popup-form-fields');
    const closeBtn = document.querySelector('.popup-close');
    if (nodeContents[nodeId]) {
        nodeInfoElement.innerHTML = nodeContents[nodeId];
    }
    else {
        return;
    }
    popup.classList.remove('hidden');
    closeBtn.addEventListener('click', () => {
        popup.classList.add('hidden');
    });
    window.addEventListener('click', (event) => {
        if (event.target === popup) {
            popup.classList.add('hidden');
        }
    });
}
// Function to add click event listeners to nodes
function addClickEventsToParentNodes() {
    document.querySelectorAll('.parent-node').forEach(parentNode => {
        parentNode.addEventListener('dblclick', (event) => {
            const drawflowNode = parentNode.querySelector('.node');
            const nodeId = drawflowNode.getAttribute('data-node');
            console.log(parentNode);
            if (nodeId) {
                showPopup(nodeId);
            }
        });
    });
}
// Initialize Drawflow editor
var editor = new Drawflow(document.getElementById('drawflow'));
editor.reroute = true;
editor.line_path = 0.5;
editor.start();
editor.createCurvature = function (start_x, start_y, end_x, end_y, curvature_value, type) {
    var center_y = ((end_y - start_y) / 2) + start_y;
    var default_round_radius = 10;
    var round_radius = Math.min(default_round_radius, Math.abs(start_x - end_x), Math.abs(start_y - end_y));
    var isRight = end_x > start_x;
    var isDown = end_y > start_y;
    return `M ${start_x} ${start_y} 
            L ${start_x} ${isDown ? center_y - round_radius : center_y + round_radius} 
            A ${round_radius} ${round_radius} 0 0 ${isRight ^ !isDown ? 0 : 1} ${isRight ? start_x + round_radius : start_x - round_radius} ${center_y}
            L ${isRight ? end_x - round_radius : end_x + round_radius} ${center_y}
            A ${round_radius} ${round_radius} 0 0 ${isRight ^ !isDown ? 1 : 0} ${end_x} ${isDown ? center_y + round_radius : center_y - round_radius}
            L ${end_x} ${end_y}`;
};
// Define nodes with HTML content
const customerSignUp = `<div class="customer-sign-up node" data-node="customerSignsUpNode"><p><i class="fa-regular fa-circle-play"></i> Customer signs up for product updates</p></div>`;
const sendEmail = `<div class="send-email node" data-node="sendEmailNode"><p><i class="fa-regular fa-envelope"></i> Send email</p></div>`;
const replyCheck = `<div class="reply-check node" data-node="repliedToConversationNode"><p><i class="fa-solid fa-shuffle"></i> Replied to conversation?</p></div>`;
const contactExits = `<div class="contact-exits node"  data-node="contactExitsNode"><i class="fa-regular fa-circle-check"></i><p>Contact Exits</p></div>`;
const sendSurvey = `<div class="send-survey node" data-node="sendSurveyNode"><p><i class="fa-solid fa-list-check"></i> Send survey</p></div>`;
const btnAddNote = `<a href="javascript:void(0)" onclick="ClickAddNote()" class="add-note">Thêm <i class="fa-solid fa-plus"></i></a>`;
// Add nodes to the editor
const customerSignsUpNode = editor.addNode('customerSignUp', 0, 1, 200, 50, 'customer-sign-up', {}, customerSignUp);
const btn_add_note = editor.addNode('add-note', 1, 1, 200, 175, 'add-note', {}, btnAddNote);
// const sendEmailNode = editor.addNode('sendEmail', 1, 1, 400, 175, 'send-email', {}, sendEmail.html);
// const repliedToConversationNode = editor.addNode('replyCheck', 1, 2, 400, 300, 'reply-check', {}, replyCheck.html);
// const contactExitsNode = editor.addNode('contactExits', 1, 0, 200, 450, 'contact-exits', {}, contactExits.html);
// const sendSurveyNode = editor.addNode('sendSurvey', 1, 0, 600, 450, 'send-survey', {}, sendSurvey.html);
editor.addConnection(customerSignsUpNode, btn_add_note, 'output_1', 'input_1');
// editor.addConnection(sendEmailNode, repliedToConversationNode, 'output_1', 'input_1');
// editor.addConnection(repliedToConversationNode, contactExitsNode, 'output_1', 'input_1'); // Đường "Yes"
// editor.addConnection(repliedToConversationNode, sendSurveyNode, 'output_2', 'input_1'); // Đường "No"
// Events!
/* DRAG EVENT */
// Drag and drop functionality
document.getElementById('drawflow')?.addEventListener('drop', drop);
document.getElementById('drawflow')?.addEventListener('dragover', allowDrop);
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer?.setData("node", ev.target.getAttribute('data-node'));
}
function drop(ev) {
    ev.preventDefault();
    const nodeName = ev.dataTransfer?.getData("node");
    const x = ev.clientX - ev.target.getBoundingClientRect().left;
    const y = ev.clientY - ev.target.getBoundingClientRect().top;
    addNodeToDrawFlow(nodeName, x, y);
}
function addNodeToDrawFlow(element) {
    // Ẩn popup và xóa node hiện tại
    const popup = document.getElementById('popup-drawflow');
    popup.classList.add('hidden');
    const id_popup = popup.getAttribute('data-id');
    editor.removeNodeId(id_popup);
    editor.updateConnectionNodes(id_popup);
    const pos_x = parseInt(element.getAttribute('data-pos_x'));
    const pos_y = parseInt(element.getAttribute('data-pos_y'));
    const nodeName = element.getAttribute('data-name');
    const output = parseInt(element.getAttribute('data-out'));
    const input = parseInt(element.getAttribute('data-input'));
    const className = element.getAttribute('data-class');
    const parent = element.getAttribute('data-parent');
    const nodeHtml = document.querySelector(`.drag-drawflow[data-name="${nodeName}"]`);
    const contenthtml = nodeHtml.innerHTML;
    const newNodeId = editor.addNode(nodeName, input, output, pos_x, pos_y, className, {}, contenthtml);
    // Kết nối node mới với node cuối cùng nếu tồn tại
    if (lastLargeNodeId) {
        if (nodeName === 'sendSurvey') {
            editor.addConnection(lastLargeNodeId, newNodeId, 'output_2', 'input_1'); // Kết nối với output_2 của sendSurvey
            addLabelToConnection(lastLargeNodeId, newNodeId, 'No', 2);
        }
        else {
            editor.addConnection(lastLargeNodeId, newNodeId, 'output_1', 'input_1'); // Kết nối với output_1 của node trước đó
            addLabelToConnection(lastLargeNodeId, newNodeId, 'Yes', 1);
        }
    }
    else if (lastCreatedNodeId) {
        editor.addConnection(lastCreatedNodeId, newNodeId, 'output_1', 'input_1'); // Kết nối với output_1 của node trước đó
    }
    // Cập nhật node cuối cùng được tạo
    if (output === 2) {
        // Lưu node lớn (có Yes/No)
        lastLargeNodeId = newNodeId;
    }
    else {
        // Xóa lưu trữ khi không phải node lớn
        lastCreatedNodeId = newNodeId;
    }
    // Loại bỏ nhãn dán cũ nếu có
    if (nodeName === 'sendSurvey' || nodeName === 'contactExits') {
        const boxLabel = document.querySelector(`.connection-label`);
        if (boxLabel) {
            boxLabel.remove();
        }
    }
    // Thêm nút "Add Note" nếu cần
    const new_pos_y = pos_y + 130;
    if (output === 2) {
        const btn_add_yes = editor.addNode('add-note', 1, 0, 25, 450, 'add-note', {}, btnAddNote);
        const btn_add_no = editor.addNode('add-note', 1, 0, 400, 450, 'add-note', {}, btnAddNote);
        editor.addConnection(newNodeId, btn_add_yes, 'output_1', 'input_1');
        editor.addConnection(newNodeId, btn_add_no, 'output_2', 'input_1');
        addLabelToConnection(newNodeId, btn_add_yes, 'Yes', 1);
        addLabelToConnection(newNodeId, btn_add_no, 'No', 2);
    }
    else if (output === 0 && parent === 'replyCheck') {
        // Do nothing in this case
    }
    else {
        const btn_add_note = editor.addNode('add-note', input, output, pos_x, new_pos_y, 'add-note', {}, btnAddNote);
        editor.addConnection(newNodeId, btn_add_note, 'output_1', 'input_1');
    }
}
function ClickAddNote() {
    const btn = document.querySelector('.drawflow-node.add-note');
    btn.addEventListener('dblclick', (event) => {
        const popup = document.getElementById('popup-drawflow');
        popup.classList.remove('hidden');
        // Lấy thuộc tính CSS của phần tử
        const computedStyle = window.getComputedStyle(btn);
        const top = computedStyle.getPropertyValue('top');
        const left = computedStyle.getPropertyValue('left');
        const new_left = parseFloat(left) + 690;
        popup.style.top = top;
        popup.style.left = `${new_left}px`;
        const id = btn.getAttribute('id');
        popup.setAttribute('data-id', id);
    });
}
// Function to add labels to connections
function addLabelToConnection(nodeFrom, nodeTo, labelText, outputIndex) {
    // Lấy phần tử SVG và đường kẻ kết nối
    const connectionElement = document.querySelector(`.connection.node_in_node-${nodeTo}.node_out_node-${nodeFrom}.output_${outputIndex}`);
    const svg = connectionElement.closest('svg');
    const path = svg?.querySelector('path');
    if (!path)
        return console.error('Path element not found in SVG');
    // Tạo và thêm nhãn
    const label = document.createElement('div');
    label.className = `connection-label`;
    label.id = `label-${nodeTo}`;
    label.textContent = labelText;
    document.body.appendChild(label);
    if (labelText === 'No') {
        label.classList.add('no');
    }
    // Cập nhật vị trí nhãn
    const updateLabelPosition = () => {
        const connectionBox = connectionElement.getBoundingClientRect();
        const length = path.getTotalLength();
        const { x, y } = path.getPointAtLength(length / 2);
        const svgPoint = svg.createSVGPoint();
        svgPoint.x = x;
        svgPoint.y = y;
        const screenPoint = svgPoint.matrixTransform(svg.getScreenCTM());
        label.style.position = 'absolute';
        label.style.left = `${screenPoint.x}px`;
        label.style.top = `${screenPoint.y - 12}px`;
    };
    updateLabelPosition();
    editor.on('zoom', updateLabelPosition);
    window.addEventListener('resize', updateLabelPosition);
    window.addEventListener('mouseup', updateLabelPosition);
    window.addEventListener('mousemove', updateLabelPosition);
}
// Drawflow Events
editor.on('connectionCreated', function (connection) {
    console.log('Connection created', connection);
});
editor.on('connectionRemoved', function (connection) {
    console.log('Connection removed', connection);
});
editor.on('nodeSelected', function (connection) {
    // Add click events to nodes
    addClickEventsToParentNodes();
});
const btn_clear = document.getElementById('btn-clear');
btn_clear.addEventListener('click', () => {
    const connectionLabels = document.querySelectorAll('.connection-label');
    connectionLabels.forEach(label => {
        label.classList.add('hide');
    });
});