import { Fragment, FC } from 'react';
import { provide, useDependencies } from '@servicetitan/react-ioc';
import { observer } from 'mobx-react';
import { ButtonGroup, Button } from '@servicetitan/design-system';
import { Table, TableColumn } from '../..';
import { TableStore } from './state-caching-table.store';

export const TableStateCachingExample: FC = provide({
    singletons: [TableStore],
})(
    observer(() => {
        const [{ tableState, showProducts, showBeverages }] = useDependencies(TableStore);

        return (
            <Fragment>
                <ButtonGroup className="m-b-2">
                    <Button small onClick={showProducts}>
                        Show Products
                    </Button>
                    <Button small onClick={showBeverages}>
                        Show Beverages
                    </Button>
                </ButtonGroup>

                <Table tableState={tableState} striped sortable>
                    <TableColumn field="ProductID" title="ID" width="100px" />

                    <TableColumn field="ProductName" title="Product Name" />

                    <TableColumn field="Description" title="Product Description" />
                </Table>
            </Fragment>
        );
    })
);