import { FC, Fragment } from 'react';
import { observer } from 'mobx-react';
import { provide, useDependencies } from '@servicetitan/react-ioc';
import { BodyText, Button, TableColumn } from '@servicetitan/design-system';

import { Table, ResetPaginationMode, useObservingTableState } from '../../../';
import { UseObservingTableStateDemoStore } from '../stores/use-observing-table-state-demo.store';
//

export interface TableUseTableStateExampleProps {
    resetPaginationMode: ResetPaginationMode;
}
export const TableUseTableStateExample: FC<TableUseTableStateExampleProps> = provide({
    singletons: [UseObservingTableStateDemoStore],
})(
    observer(({ resetPaginationMode }) => {
        const [
            {
                data,
                updateDataKeepRoot,
                updateDataChangeRoot,
                add5RowsWithKeepDataRoot,
                remove5RowsWithKeepDataRoot,
                add5RowsWithUpdateDataRoot,
                remove5RowsWithUpdateDataRoot,
            },
        ] = useDependencies(UseObservingTableStateDemoStore);
        const tableState = useObservingTableState(
            data,
            { pageSize: 5 },
            { idSelector: p => p.ProductID },
            resetPaginationMode
        );

        return (
            <Fragment>
                <table className="m-b-2" cellPadding={4}>
                    <tr>
                        <td>
                            <BodyText>Keep data root:</BodyText>
                        </td>
                        <td>
                            <Button onClick={updateDataKeepRoot}>Update prices</Button>
                        </td>
                        <td>
                            <Button onClick={add5RowsWithKeepDataRoot}>Add 5 rows</Button>
                        </td>
                        <td>
                            <Button onClick={remove5RowsWithKeepDataRoot}>Remove 5 rows</Button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <BodyText>Update data root:</BodyText>
                        </td>
                        <td>
                            <Button onClick={updateDataChangeRoot}>Update prices</Button>
                        </td>
                        <td>
                            <Button onClick={add5RowsWithUpdateDataRoot}>Add 5 rows</Button>
                        </td>
                        <td>
                            <Button onClick={remove5RowsWithUpdateDataRoot}>Remove 5 rows</Button>
                        </td>
                    </tr>
                </table>
                <Table tableState={tableState} sortable groupable>
                    <TableColumn field="ProductID" title="ID" width="100px" />

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

                    <TableColumn
                        field="UnitPrice"
                        title="Unit Price"
                        format="{0:c}"
                        width="125px"
                    />
                </Table>
            </Fragment>
        );
    })
);