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

import {
    Table,
    TableColumn,
    DateRangeColumnMenuFilter,
    NumericRangeColumnMenuFilter,
    CurrencyRangeColumnMenuFilter,
} from '../..';
import { TableStore } from './table.store';
import { Banner } from '@servicetitan/design-system';

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

        return (
            <Fragment>
                <Banner title="Date range filter" className="m-b-2">
                    Allows to choose date range
                </Banner>
                <Table tableState={tableState}>
                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
                    <TableColumn field="ProductName" title="Product Name" width="240px" />
                    <TableColumn
                        field="UnitsOnOrder"
                        title="Units On Order"
                        columnMenu={DateRangeColumnMenuFilter}
                    />
                </Table>
            </Fragment>
        );
    })
);

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

        return (
            <Fragment>
                <Banner title="Numeric range filter" className="m-b-2">
                    Allows to choose numeric range
                </Banner>
                <Table tableState={tableState}>
                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
                    <TableColumn field="ProductName" title="Product Name" width="240px" />
                    <TableColumn
                        field="UnitsInStock"
                        title="Units In Stock"
                        columnMenu={NumericRangeColumnMenuFilter}
                    />
                </Table>
            </Fragment>
        );
    })
);

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

        return (
            <Fragment>
                <Banner title="Currency range filter" className="m-b-2">
                    Allows to choose currency range
                </Banner>
                <Table tableState={tableState}>
                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
                    <TableColumn field="ProductName" title="Product Name" width="240px" />
                    <TableColumn
                        field="UnitPrice"
                        title="Unit Price"
                        columnMenu={CurrencyRangeColumnMenuFilter}
                    />
                </Table>
            </Fragment>
        );
    })
);