import React from 'react';
import { withApollo, compose } from 'react-apollo';
import { pick } from 'lodash';
import Autocomplete from 'react-toolbox/lib/autocomplete';
import { uiState } from 'react-redux-ui-state';
import suggestionQuery from './queries/suggestionQuery.graphql';

export function MyComponent({ client, setUiState, uiSelections, uiSource }) {
    function slugify(str) {
        return `${str.split(' ').join('_')}`;
    }

    function loadSuggestions(query) {
        setUiState({
            uiSource: { [slugify(query)]: query, ...pick(uiSource, uiSelections) },
        });

        return client
            .query({
                query: suggestionQuery,
                variables: {
                    text: query,
                },
            })
            .then(({ data: { suggestions: { items } } }) => {
                // we want to update the source with the results from the server
                const results = items.reduce((acc, item) => {
                    return {
                        [slugify(item.label)]: item.label,
                        ...acc,
                    };
                }, {});

                const merged = { [slugify(query)]: query, ...results, ...uiSource };

                return setUiState({
                    uiSource: merged,
                });
            });
    }

    return (
        <div>
            <Autocomplete
                direction="down"
                selectedPosition="above"
                label="your label"
                multiple
                onChange={value => setUiState({ uiSelections: value })}
                onQueryChange={loadCategorySuggestions}
                onFocus={() =>
                    setUiState({
                        uiSource: pick(uiSource, uiSelections),
                    })}
                source={uiSource}
                suggestionMatch="anywhere"
                value={uiSelections}
            />
        </div>
    );
}

const uiStateConfig = {
    name: 'MyComponent',
    state: () => ({
        uiSelections: [],
        uiSource: {},
    }),
};

const wrapper = compose(withApollo, uiState(uiStateConfig));

export default wrapper(MyComponent);