import React, {useState, useEffect} from 'react';
import Graph from './Graph.js';
import {searchTerms} from './fetch.js';

const useResults = terms =>
{
    const [results, setResults] = useState({
        nodes: {},
        edges: []
    });

    useEffect(() =>
    {
        const fetch = async () =>
        {
            setResults(await searchTerms(terms));
        };

        fetch();
    }, [terms]);

    return results;
};

const SearchResults = ({terms}) =>
{
    const {nodes, edges} = useResults(terms);
    return (
        <Graph
            nodes={Object.keys(nodes)}
            edges={edges}
            render={id => <span className={[
                'SearchResults_result',
                terms.includes(nodes[id].name) ? 'SearchResults_result-term' : '',
                nodes[id].types.includes('Maladie') ? 'SearchResults_result-disease' : '',
            ].join(' ')}>{nodes[id].name}</span>}
        />
    );
};

export default SearchResults;