import { useMemo, FC } from 'react';

import { provide, useDependencies } from '@servicetitan/react-ioc';

import { observer } from 'mobx-react';

import { Table, TableColumn, multiSelectColumnMenuFilter } from '../..';

import { TableStore } from './table.store';

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

        const madeInColumnMenu = useMemo(
            () => multiSelectColumnMenuFilter(madeInOptions),
            [madeInOptions]
        );

        const categoryColumnMenu = useMemo(
            () =>
                multiSelectColumnMenuFilter(
                    new Array(20).fill(0).map((_, index) => index),
                    undefined,
                    { contentMaxHeight: '250px' }
                ),
            []
        );

        return (
            <Table tableState={tableState}>
                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />

                <TableColumn field="ProductName" title="Product Name" width="240px" />

                <TableColumn field="MadeIn" title="Made In" columnMenu={madeInColumnMenu} />
                <TableColumn
                    field="CategoryID"
                    title="CategoryID"
                    columnMenu={categoryColumnMenu}
                />
            </Table>
        );
    })
);