import React, { useEffect, useState } from 'react';
import {
    ReactFlow,
    Background,
    useNodesState,
    useEdgesState,
    addEdge,
    getIncomers,
    getOutgoers,
    getConnectedEdges,
} from '@xyflow/react';
import { isEmpty } from 'ramda';

import '@xyflow/react/dist/style.css';

const FlowBuilder = ({ initialForm = 0, finalForm = 0, forms = [], updateFn }) => {
    const [nodes, setNodes] = useState([]);
    const [edges, setEdges] = useState([]);

    const range = (start, stop, step) => {
        return Array.from(
            { length: (stop - start) / step + 1 },
            (_, i) => start + i * step
        );
    }

    useEffect(() => {
        if (initialForm && finalForm && forms.length) {
            const total = (forms.length - 2) * (200 - 90);
            let coordinates = range(total * -1, total, 200);

            const initialNodes = forms.map(o => {
                let obj;

                if (o.id === initialForm) {
                    obj = {
                        id: String(o.id),
                        type: 'input',
                        data: { label: o.label },
                        position: { x: 0, y: 0 },
                    }
                } else if (o.id === finalForm) {
                    obj = {
                        id: String(o.id),
                        type: 'output',
                        data: { label: o.label },
                        position: { x: 0, y: 300 },
                    }
                } else {
                    const x = coordinates.splice(0, 1);
                    obj = {
                        id: String(o.id),
                        data: { label: o.label },
                        position: { x, y: 150 },
                    }
                }
                return obj
            });

            let edges = [];
            forms.map(o => {
                if (o.id !== initialForm && o.id !== finalForm) {
                    edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id) });
                    edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm) });
                }
            });

            setNodes(initialNodes);
            setEdges(edges);
            updateFn(edges);
        } else {
            setNodes([]);
            setEdges([]);
        }
    }, [initialForm, finalForm, forms]);

    return (
        !isEmpty(nodes) && !isEmpty(edges)
            ? <div className="reactFlow__wrapper">
                <ReactFlow
                    nodes={nodes}
                    edges={edges}
                    nodesDraggable={false}
                    nodesConnectable={false}
                    fitView
                    attributionPosition="top-right"
                >
                    <Background variant="dots" gap={12} size={1}/>
                </ReactFlow>
            </div>
            : null
    );
}

export default FlowBuilder;