import React from 'react';
import TermInput from './TermInput.js';
import DiseaseGraph from './DiseaseGraph.js';
import {useAsync, useQuery} from '../util.js';
import {
    diseasesBySymptoms,
    exploreSymptoms,
} from '../data/mock';

const App = () =>
{
    const {
        query,
        addTerm: addQueryTerm,
        removeTerm: removeQueryTerm,
    } = useQuery();

    // Récupération des résultats de la recherche
    const diseases = useAsync([], diseasesBySymptoms, query);
    const terms = useAsync([], exploreSymptoms, diseases);

    // Tous les termes compatibles avec la recherche qui n’apparaissent pas
    // dans la recherche
    const availableTerms = terms.filter(({id}) =>
        !query.some(({id: termId}) => termId === id)
    );

    return (
        <div className="App">
            <TermInput
                query={query}
                addQueryTerm={addQueryTerm}
                removeQueryTerm={removeQueryTerm}
                availableTerms={availableTerms}
            />
            <DiseaseGraph
                terms={terms}
                query={query}
                addQueryTerm={addQueryTerm}
                removeQueryTerm={removeQueryTerm}
            />
        </div>
    );
};

export default App;