import { useMemo, FC, Fragment } from 'react';

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

import { observer } from 'mobx-react';

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

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

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

        const madeInColumnMenu = useMemo(
            () => singleSelectColumnMenuFilter({ options: madeInOptions }),
            [madeInOptions]
        );

        const categoryColumnMenu = useMemo(
            () =>
                singleSelectColumnMenuFilter({
                    options: categories,
                    renderItem: cat => (
                        <BodyText>
                            <span className="fw-bold">{cat.CategoryName}</span> (#{cat.CategoryID})
                        </BodyText>
                    ),
                    valueSelector: cat => cat.CategoryID,
                    contentMaxHeight: '200px',
                }),
            []
        );

        return (
            <Fragment>
                <Banner title="Default filter with single select" className="m-b-2">
                    Single select filter allows to choose one option from the provided list. You can
                    pass simple options (string or number) or complex objects
                    <br />
                    Use it when options list is fixed and less than 20 items
                </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 (simple single-select filter)"
                        columnMenu={madeInColumnMenu}
                    />
                    <TableColumn
                        field="CategoryID"
                        title="Category (simple single-select filter)"
                        columnMenu={categoryColumnMenu}
                        cell={CategoryCell}
                    />
                </Table>
            </Fragment>
        );
    })
);

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

        const productNameCustomFilter = useMemo(() => {
            const isVowel = (str: string) => /[aeiou]/i.test(str[0]);

            return singleSelectColumnMenuFilter({
                options: [0, 1],
                renderItem: item => (item ? 'Start with Vowel' : 'Start with Consonants'),
                filterOperator: (madeIn: string, value: number) =>
                    madeIn ? (value ? isVowel(madeIn) : !isVowel(madeIn)) : false,
            });
        }, []);

        return (
            <Fragment>
                <Banner title="Default filter with single select" className="m-b-2">
                    Single select filter allows to choose one option from the provided list. You can
                    pass simple options (string or number) or complex objects
                    <br />
                    Custom filter allows you to provide custom filtering options
                </Banner>
                <Table tableState={tableState} striped={false}>
                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
                    <TableColumn
                        field="ProductName"
                        title="Product Name (custom single-select filter)"
                        columnMenu={productNameCustomFilter}
                    />
                </Table>
            </Fragment>
        );
    })
);