import React, {useEffect} from 'react';
import Graph from './Graph.js';
import {types} from '../data/mock.js';
import {useAsync} from '../util.js';
import {symptomsSubgraph} from '../fetch.js';

const DiseaseGraph = ({terms, setTerms, results}) =>
{
    const {nodes, edges} = useAsync({
        nodes: {},
        edges: []
    }, symptomsSubgraph, results);

    /**
     * Rendu d’un nœud du graphe.
     *
     * @param id Identifiant du nœud à afficher.
     */
    const render = id =>
    {
        const isTerm = terms.some(({id: termId}) => termId === id);
        const isDisease = nodes[id].types.includes(types.disease);

        return (
            <span className={[
                'SearchResults_result',
                isTerm ? 'SearchResults_result-term' : '',
                isDisease ? 'SearchResults_result-disease' : '',
            ].join(' ')}>{nodes[id].name}</span>
        );
    };

    /**
     * Gère le clic sur un nœud du graphe.
     *
     * @param id Identifiant du nœud cliqué.
     */
    const handleNodeClick = id =>
    {
        const result = results.find(({id: termId}) => termId === id);
        const termIndex = terms.findIndex(({id: termId}) => termId === id);

        if (result !== undefined)
        {
            if (termIndex >= 0)
            {
                // Retrait d’un terme déjà dans la requête
                setTerms([
                    ...terms.slice(0, termIndex),
                    ...terms.slice(termIndex + 1)
                ]);
            }
            else
            {
                // Ajout d’un nouveau terme dans la requête
                setTerms(terms.concat([result]));
            }
        }
    };

    return (
        <Graph
            nodes={Object.keys(nodes)}
            edges={edges}
            emptyMessage="Aucune maladie ne corresond à ces symptômes"
            render={render}
            onNodeClick={handleNodeClick}
        />
    );
};

export default DiseaseGraph;