import * as React from 'react';
import './App.css';
import JqxComboBox from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
import JqxPanel from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';

const App = () => {
    const myPanel = React.useRef<JqxPanel>(null);

    const source = [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve',
        'Café Bombón',
        'Café au lait',
        'Caffé Corretto',
        'Café Crema',
        'Caffé Latte',
        'Caffé macchiato',
        'Café mélange',
        'Coffee milk',
        'Cafe mocha',
        'Cappuccino',
        'Carajillo',
        'Cortado',
        'Cuban espresso',
        'Espresso',
        'Eiskaffee',
        'The Flat White',
        'Frappuccino',
        'Galao',
        'Greek frappé coffee',
        'Iced Coffee',
        'Indian filter coffee',
        'Instant coffee',
        'Irish coffee',
        'Liqueur coffee'
    ];

    const onSelect = React.useCallback((event: any) => {
        const args = event.args;
        if (args !== undefined) {
            const item = args.item;
            if (item !== null) {
                myPanel.current?.prepend(`<div style="margin-top: 5px;">Selected: ${item.label}</div>`);
            }
        }
    }, []);

    const onUnselect = React.useCallback((event: any) => {
        const args = event.args;
        if (args !== undefined) {
            const item = args.item;
            if (item !== null) {
                myPanel.current?.prepend(`<div style="margin-top: 5px;">Unselected: ${item.label}</div>`);
            }
        }
    }, []);

    return (
        <div>
            <JqxComboBox theme={'material-purple'} style={{ float: 'left', marginTop: '100px' }}
                onSelect={onSelect} onUnselect={onUnselect}
                width={200} height={25} source={source} />
            <div style={{ float: 'left', fontSize: '12px', fontFamily: 'Verdana', marginLeft: '20px', marginTop: '100px' }}>
                <span>Events:</span>
                <JqxPanel theme={'material-purple'} ref={myPanel}
                    width={200} height={250} />
            </div>
        </div>
    );
};

export default App;