app.js

// requires nodesqlparser.umd.js loaded first
(function() {
    const toggleBtn = document.getElementById('toggleBtn');
    const sqlInput = document.getElementById('sqlInput');
    const inputArea = document.getElementById('inputArea');
    const viewArea = document.getElementById('viewArea');
    const rendered = document.getElementById('rendered');
    const msg = document.getElementById('msg');

    let selectedCol = null;

    toggleBtn.addEventListener('click', () => {
        if (viewArea.classList.contains('hidden')) {
            // switch to view mode
            const sql = sqlInput.value.trim();
            if (!sql) {
                showMsg('No SQL');
                return;
            }
            const parsed = tryParse(sql);
            if (!parsed) return;
            renderView(parsed);
            inputArea.classList.add('hidden');
            viewArea.classList.remove('hidden');
            toggleBtn.textContent = 'Switch to Input Mode';
            toggleBtn.focus();
        } else {
            // switch to input mode
            inputArea.classList.remove('hidden');
            viewArea.classList.add('hidden');
            toggleBtn.textContent = 'Switch to View Mode';
            clearMsg();
            selectedCol = null;
        }
    });

    function showMsg(s) {
        msg.textContent = s;
        setTimeout(() => {
            msg.textContent = '';
        }, 3000);
    }

    function clearMsg() {
        msg.textContent = '';
    }


    function extractRowsFromInsert(ins) {
        if (!ins) return [];
        // Case A: ins.values is an array of tuples (each tuple may be array or expr_list object)
        if (Array.isArray(ins.values)) {
            return ins.values.map(tuple => {
                if (Array.isArray(tuple)) return tuple.map(exprToString);
                if (tuple && Array.isArray(tuple.value)) return tuple.value.map(exprToString);
                return [];
            });
        }
        // Case B: ins.values is an object with .value = array of expr_list items
        if (ins.values && Array.isArray(ins.values.values) && ins.values.type == 'values') {
            return ins.values.values.map(item => {
                if (item && Array.isArray(item.value)) return item.value.map(exprToString);
                // sometimes item may already be an array
                if (Array.isArray(item)) return item.map(exprToString);
                return [];
            });
        }
        // Case C: select
        if (ins.values && Array.isArray(ins.values.columns) && ins.values.type == 'select') {
            return [ins.values.columns.map(item => {
                if (item && item.expr && item.expr.column) {
                    return item.expr.column;
                } else {
                    return '?';
                }
            })];
        }
        // Case D: older shapes: ins.value.value
        if (ins.value && Array.isArray(ins.value.value)) {
            return ins.value.value.map(item => (item && Array.isArray(item.value)) ? item.value.map(exprToString) : []);
        }
        return [];
    }

    function tryParse(sql) {
        try {
            const parser = new NodeSQLParser.Parser();
            // astify will return object (or array) for the parsed SQL
            const ast = parser.astify(sql, {
                database: 'MySQL'
            });
            // normalize in case it returns an array
            const ins = Array.isArray(ast) ? ast.find(n => n.type === 'insert') : ast;
            if (!ins || ins.type !== 'insert') {
                showMsg('Not recognized as an INSERT SQL');
                return null;
            }
            return {
                table: getTableName(ins.table),
                columns: (ins.columns || []).map(c => (typeof c === 'object' ? (c.column || c) : c)),
                rows: extractRowsFromInsert(ins),
                valueType: ins.values.type,
                selFrom: getTableName(ins.values['from']),
            };
        } catch (err) {
            console.error(err);
            showMsg('Parse error: ' + (err && err.message ? err.message : String(err)));
            return null;
        }
    }

    function getTableName(n) {
        try {
            if (!n) return '';
            if (n && n[0] && n[0].table) {
                return (n[0].db ? n[0].db + '.' : '') + n[0].table;
            }
            if (typeof n === 'string') return n;
            if (n && n.table) return n.table;
            return '';
        } catch (e) {
            return '';
        }
    }

    function nodeFnName(n) {
        return (Array.isArray(n.name) && n.name[0] && n.name[0].value) ? n.name[0].value : n;
    }

    // convert AST expression nodes to str
    function exprToString(node) {
        if (!node) return '';
        switch (node.type) {
            case 'number':
                return String(node.value);
            case 'datatype':
                return String(node.dataType);
            case 'string':
                return `'${node.value}'`;
            case 'single_quote_string':
                return `'${node.value}'`;
            case 'double_quote_string':
                return `"${node.value}"`;
            case 'null':
                return 'NULL';
            case 'default':
                return 'DEFAULT';
            case 'binary_expr':
                return `${node.parentheses?'(':''}${exprToString(node.left)} ${node.operator} ${exprToString(node.right)}${node.parentheses?')':''}`;
            case 'function':
                return nodeFnName(node.name) + '(' + (node.args ? (Array.isArray(node.args) ? node.args.map(exprToString).join(', ') : exprToString(node.args)) : '') + ')';
            case 'expr_list':
                return '(' + (node.value || []).map(exprToString).join(', ') + ')';
            default:
                // fallback: try reading value or raw
                if (node.value !== undefined) return String(node.value);
                return JSON.stringify(node);
        }
    }

    function escapeHtml(s) {
        return String(s).replace(/[&<>"']/g, c => ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        } [c]));
    }

    function valueRenderUtil(valueType) {
        switch (valueType) {
            case 'values':
                return {
                    valueKeyword: 'VALUES',
                        valueFormatter: (v, i, iMax, t) => `(${v})${i < iMax ? ',\n' : '\n;'}`,
                };
            case 'select':
                return {
                    valueKeyword: 'SELECT',
                        valueFormatter: (v, i, iMax, t) => ` ${v}\nFROM ${t}\n;`,
                };
            default:
                return {};
        }
    }

    // render parsed data into viewArea
    function renderView(parsed) {
        selectedCol = null;
        clearMsg();
        const {
            table,
            columns,
            rows,
            valueType,
            selFrom
        } = parsed;
        // Build HTML with clickable column names and values annotated with data-col/data-row
        const parts = [];
        parts.push('<span class="kw">INSERT INTO</span> ');
        parts.push(`<span class="tbl">${escapeHtml(table)}</span> `);
        parts.push('(<span class="cols">');
        parts.push(columns.map((c, idx) => `<span class="col-name" data-col="${idx}">${escapeHtml(String(c))}</span>`).join(', '));
        const {
            valueKeyword,
            valueFormatter
        } = valueRenderUtil(valueType);
        parts.push(`</span>) ${valueKeyword}\n`);

        rows.forEach((row, r) => {
            parts.push(valueFormatter(
                row.map((v, idx) => `<span class="val" data-col="${idx}" data-row="${r}">${escapeHtml(v)}</span>`).join(', '),
                r, rows.length - 1, selFrom));
        });

        rendered.innerHTML = parts.join('');

        // attach click handlers to column names
        rendered.querySelectorAll('.col-name').forEach(el => {
            el.addEventListener('click', () => {
                const col = el.dataset.col;
                if (selectedCol === col) {
                    // toggle off
                    selectedCol = null;
                    clearSelectionHighlight();
                } else {
                    selectedCol = col;
                    highlightColumn(col);
                }
                // mark selected state on column names
                rendered.querySelectorAll('.col-name').forEach(cn => cn.classList.toggle('selected', cn.dataset.col === selectedCol));
            });
        });
    }

    function clearSelectionHighlight() {
        rendered.querySelectorAll('.val.highlight').forEach(n => n.classList.remove('highlight'));
        rendered.querySelectorAll('.col-name').forEach(n => n.classList.remove('selected'));
    }

    function highlightColumn(colIdx) {
        clearSelectionHighlight();
        rendered.querySelectorAll('.val[data-col="' + colIdx + '"]').forEach(n => n.classList.add('highlight'));
        const colEl = rendered.querySelector('.col-name[data-col="' + colIdx + '"]');
        if (colEl) colEl.classList.add('selected');
    }

    // optional: allow clicking a value itself to highlight its column
    rendered.addEventListener('click', (ev) => {
        const v = ev.target.closest && ev.target.closest('.val');
        if (!v) return;
        const col = v.dataset.col;
        if (!col) return;
        if (selectedCol === col) {
            selectedCol = null;
            clearSelectionHighlight();
        } else {
            selectedCol = col;
            highlightColumn(col);
        }
    });
})();