import { ComponentType, CSSProperties, FC } from 'react';
import {
    TableColumnMenuFilter,
    TableColumnMenuProps,
    TableFilterCellProps,
} from '@servicetitan/design-system';
import { TableColumnMenuFilterUIProps } from '..';
import { DropDownList } from '@progress/kendo-react-dropdowns';

export const StandardColumnMenuFilter = (props: TableColumnMenuProps) => (
    <TableColumnMenuFilter {...props} expanded />
);

export interface CustomColumnMenuFilterSingleOpts {
    contentMaxHeight?: string;
    contentClassName?: string;
}
export interface CustomColumnMenuFilterDoubleOpts {
    double?: boolean;
    doubleContentClassName?: string;
}

export type CustomColumnMenuFilterOpts = CustomColumnMenuFilterSingleOpts &
    CustomColumnMenuFilterDoubleOpts;

export function renderCustomColumnMenuFilter(
    FilterCell: ComponentType<TableFilterCellProps>,
    doubleOrOptions?: boolean | CustomColumnMenuFilterOpts
) {
    const opts: CustomColumnMenuFilterOpts =
        typeof doubleOrOptions === 'boolean'
            ? { double: doubleOrOptions }
            : (doubleOrOptions ?? {});
    const FilterUI: FC<TableColumnMenuFilterUIProps> = ({
        firstFilterProps,
        secondFilterProps,
        logicData,
        logicValue,
        onLogicChange,
    }) => {
        const contentStyles: CSSProperties = {};

        if (opts.contentMaxHeight) {
            contentStyles.maxHeight = opts.contentMaxHeight;
            contentStyles.overflowY = 'auto';
        }

        return (
            <div className={opts.contentClassName} style={contentStyles}>
                <FilterCell {...firstFilterProps} />
                {!!opts.double && (
                    <div className={opts.doubleContentClassName}>
                        <DropDownList
                            data={logicData}
                            value={logicValue}
                            onChange={onLogicChange}
                            className="k-filter-and m-b-1"
                            textField="text"
                        />
                        <FilterCell {...secondFilterProps} />
                    </div>
                )}
            </div>
        );
    };

    return (props: TableColumnMenuProps) => (
        <TableColumnMenuFilter {...props} filterUI={FilterUI} expanded />
    );
}