import { useMemo, FC, Fragment } from 'react';
import { observer } from 'mobx-react';
import { provide, useDependencies } from '@servicetitan/react-ioc';

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

import { TableStore } from './table.store';
import { CategoryCell } from './categories';
import { Banner } from '@servicetitan/design-system';

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

        const madeInColumnMenu = useMemo(
            () =>
                asyncSelectColumnMenuFilter({
                    dataFetcher: madeInFetcher,
                    placeholder: 'Search for made-ins',
                }),
            [madeInFetcher]
        );

        const categoryColumnMenu = useMemo(
            () =>
                asyncSelectColumnMenuFilter({
                    dataFetcher: categoryFetcher,
                    multiple: true,
                    contentMaxHeight: '250px',
                }),
            [categoryFetcher]
        );

        return (
            <Fragment>
                <Banner title="Default filter with async select" className="m-b-2">
                    Async select filter allows to choose one or several option from the list that
                    will be fetched from BE. The list size is not limited, so you can also use
                    search to find desired option.
                    <br />
                    Use it when there can be greater than 20 possible options
                </Banner>
                <Table tableState={tableState} striped={false}>
                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
                    <TableColumn field="ProductName" title="Product Name" width="240px" />
                    <TableColumn
                        field="MadeIn"
                        title="Made In (async single-select filter)"
                        columnMenu={madeInColumnMenu}
                    />
                    <TableColumn
                        field="CategoryID"
                        title="Category (async multi-select filter)"
                        columnMenu={categoryColumnMenu}
                        cell={CategoryCell}
                    />
                </Table>
            </Fragment>
        );
    })
);