import { useMemo, FC } from 'react';

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

import { observer } from 'mobx-react';

import { Tag } from '@servicetitan/design-system';
import { getEnumKeys } from '@servicetitan/form';

import {
    Table,
    TableColumn,
    BooleanEditableCell,
    DateRangeColumnMenuFilter,
    StandardColumnMenuFilter,
    standardFilterWithMultiselect,
    multiSelectColumnMenuFilter,
    CurrencyRangeColumnMenuFilter,
} from '../..';

import { TableStore } from '../overview/table.store';
import { UserRole } from '../overview/product';

const UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), userRole => (
    <Tag compact color={UserRole[userRole] === UserRole.Owner ? 'success' : 'default'}>
        {userRole}
    </Tag>
));

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

        const madeInColumnMenu = useMemo(
            () => standardFilterWithMultiselect({ tableState }),
            [tableState]
        );

        return (
            <Table
                tableState={tableState}
                striped={false}
                sortable
                pager={{ pageSizes: [3, 5, 7, 10] }}
            >
                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />

                <TableColumn
                    field="ProductName"
                    title="Product Name"
                    columnMenu={StandardColumnMenuFilter}
                    width="240px"
                />

                <TableColumn
                    field="Supplier"
                    title="Supplier"
                    columnMenu={StandardColumnMenuFilter}
                    width="150px"
                />

                <TableColumn
                    field="MadeIn"
                    title="Made In"
                    columnMenu={madeInColumnMenu}
                    width="175px"
                />

                <TableColumn
                    field="UnitsOnOrder"
                    title="First Ordered On"
                    columnMenu={DateRangeColumnMenuFilter}
                    format="{0:MM/dd/yyyy}"
                    width="240px"
                />

                <TableColumn
                    field="UnitPrice"
                    title="Unit Price"
                    columnMenu={CurrencyRangeColumnMenuFilter}
                    format="{0:c}"
                    width="125px"
                />

                <TableColumn
                    field="Discontinued"
                    title="Discontinued"
                    cell={BooleanEditableCell}
                    sortable={false}
                    width="125px"
                />

                <TableColumn
                    field="AvailableFor"
                    title="Available For"
                    columnMenu={UserRoleColumnMenuFilter}
                    width="240px"
                />
            </Table>
        );
    })
);