import { Button, GridTable, Modal } from '@theorchard/suite-components';
import { useToast } from '@theorchard/suite-frontend';
import React, { useState } from 'react';
import OAPanel from 'shared/components/oaPanel';
import { useGlobalParticipantSearchQueryQuery } from 'src/data/queries/__generated__/globalParticipantSearchQuery';

const TestTable = () => {
    const { data, loading } = useGlobalParticipantSearchQueryQuery({
        variables: { term: '*' },
    });

    return (
        <GridTable
            loading={loading}
            data={data?.globalParticipantSearchES.items ?? []}
            columnDefs={[{ name: 'item.name' }, { name: 'item.countryCode' }]}
        />
    );
};

export const HomePage = () => {
    const [showModal, setShowModal] = useState(false);
    const toast = useToast();

    return (
        <OAPanel title="Test App One" editable={false}>
            <div>
                <Button variant="primary" onClick={() => setShowModal(true)}>
                    Hi from OA test app ONE!
                </Button>
                <Button
                    onClick={() => {
                        toast('Hi!', { variant: 'success' });
                    }}
                >
                    Toast
                </Button>
            </div>

            <Modal
                isOpen={showModal}
                onRequestClose={() => setShowModal(false)}
                title="Test modal"
                confirmTitle="Close"
                hideCancelButton
                onConfirm={() => setShowModal(false)}
            >
                <TestTable />
            </Modal>
        </OAPanel>
    );
};