import * as React from 'react';
import FieldWrap from '../../FieldWrap';
import { TreeList } from '../TreeList';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import OverlayTrigger from '../../OverlayTrigger';
import { Box, Flex } from 'rebass';
import NotifyResize from '../../NotifyResize';
import Input from '../../Input';
import { TreeSelectionState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
import SimpleButton from '../../SimpleButton';
import { CheckBox } from '../../CheckBox';
import { useLatest } from '../../utils/useLatest';
import { Resizable } from 're-resizable';
import { useAdaptableComputedCSSVars } from '../../../View/AdaptableComputedCSSVarsContext';
const resizableDirections = {
    right: true,
    bottom: true,
    bottomRight: true,
};
export function toDisplayValueDefault(value) {
    if (!Array.isArray(value)) {
        return `${value}`;
    }
    return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
}
const getLabelColumn = (field, { includeExpandCollapseButton }) => {
    return {
        field,
        defaultFlex: 1,
        renderTreeIcon: true,
        defaultSortable: false,
        resizable: false,
        renderSelectionCheckBox: ({ rowInfo, dataSourceApi, api }) => {
            if (!rowInfo.isTreeNode) {
                return null;
            }
            return (React.createElement(CheckBox, { mx: 1, checked: rowInfo?.rowSelected, onChange: (checked) => {
                    dataSourceApi.treeApi.setNodeSelection(rowInfo.nodePath, checked);
                    api.focus();
                } }));
        },
        renderHeader: ({ dataSourceApi, api, allRowsSelected, someRowsSelected }) => {
            const { treeApi } = dataSourceApi;
            const allFirstLevelCollapsed = dataSourceApi
                .getOriginalDataArray()
                .every((item) => !treeApi.isNodeExpanded([item.id]));
            return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', width: '100%', onMouseDown: (e) => {
                    // so we can keep the focus on the Grid
                    e.preventDefault();
                } },
                React.createElement(CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, mr: 2, onChange: () => {
                        if (allRowsSelected) {
                            dataSourceApi.treeApi.deselectAll();
                        }
                        else {
                            dataSourceApi.treeApi.selectAll();
                        }
                        api.focus();
                    } }),
                React.createElement(Flex, { flex: 1 }),
                includeExpandCollapseButton ? (React.createElement(SimpleButton, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
                        if (allFirstLevelCollapsed) {
                            dataSourceApi.treeApi.expandAll();
                        }
                        else {
                            dataSourceApi.treeApi.collapseAll();
                        }
                    }, iconPosition: "end" }, allFirstLevelCollapsed ? 'Expand All' : 'Collapse All')) : null));
        },
    };
};
const sizeFull = {
    width: '100%',
    height: '100%',
};
function getRowCount(options) {
    return options.reduce((acc, option) => {
        if (Array.isArray(option.children)) {
            return acc + getRowCount(option.children) + 1;
        }
        return acc + 1;
    }, 0);
}
export function TreeDropdown(props) {
    const [visible, doSetVisible] = useState(false);
    const overlayDOMRef = useRef(null);
    const getProps = useLatest(props);
    const computedCSSVars = useAdaptableComputedCSSVars();
    const [treeExpandState, setTreeExpandState] = useState(undefined);
    const [searchValue, setSearchValue] = useState('');
    const labelField = props.labelField ?? 'label';
    const [stateValue, setStateValue] = useState(props.value !== undefined ? props.value : props.defaultValue || []);
    const onChange = useCallback((value) => {
        const paths = value instanceof TreeSelectionState
            ? value.getState().selectedPaths
            : value.selectedPaths || [];
        if (props.value === undefined) {
            setStateValue(paths);
        }
        props.onChange?.(paths);
    }, [props.onChange, props.value]);
    const value = props.value !== undefined ? props.value : stateValue;
    const treeSelection = useMemo(() => {
        const selection = {
            defaultSelection: false,
            selectedPaths: value,
        };
        return selection;
    }, [value]);
    const rowCount = useMemo(() => {
        return getRowCount(props.options);
    }, [props.options]);
    const hasChildren = rowCount > props.options.length;
    const columns = useMemo(() => {
        return {
            label: getLabelColumn(labelField, {
                includeExpandCollapseButton: hasChildren,
            }),
        };
    }, [labelField, hasChildren]);
    const [size, setSize] = useState({
        width: 0,
        height: rowCount * 35,
    });
    const setHeight = useCallback((height) => {
        setSize((s) => {
            return {
                ...s,
                height,
            };
        });
    }, []);
    const setWidth = useCallback((width) => {
        setSize((s) => {
            return {
                ...s,
                width,
            };
        });
    }, []);
    const getSize = useLatest(size);
    useEffect(() => {
        if (!getSize().height) {
            setHeight(rowCount * 35);
        }
    }, [rowCount]);
    const setVisible = (visible) => {
        if (visible) {
            const { onMenuOpen } = getProps();
            if (onMenuOpen) {
                onMenuOpen();
            }
            requestAnimationFrame(() => {
                doSetVisible(visible);
            });
        }
        else {
            const { onMenuClose } = getProps();
            if (onMenuClose) {
                onMenuClose();
            }
            doSetVisible(visible);
        }
    };
    const [treeListApi, setTreeListApi] = useState(null);
    const { listSizeConstraints } = props;
    const nodeMatches = useCallback(({ data }) => {
        return !searchValue
            ? data
            : `${data[labelField]}`.toLowerCase().includes(searchValue.toLowerCase());
    }, [searchValue]);
    const filterFunction = useCallback(({ data, filterTreeNode }) => {
        if (!Array.isArray(data.children)) {
            return nodeMatches({ data });
        }
        // allow non-leaf nodes to match
        if (nodeMatches({ data })) {
            return data;
        }
        return filterTreeNode(data);
    }, [nodeMatches]);
    return (React.createElement(Flex, { flexDirection: 'row', className: "ab-TreeDropdown", style: {
            width: '100%',
            ...props.style,
        }, onMouseDown: props.onMouseDown, onBlur: (e) => {
            const { relatedTarget } = e;
            const overlayDOMNode = overlayDOMRef.current;
            if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
                overlayDOMNode?.contains(relatedTarget)) {
                return;
            }
            setVisible(false);
        } },
        React.createElement(NotifyResize, { onResize: (newSize) => {
                setWidth(newSize.width);
            } }),
        React.createElement(OverlayTrigger, { visible: visible, targetOffset: 20, alignPosition: [
                // overlay - target
                ['TopLeft', 'BottomLeft'],
                ['TopRight', 'BottomRight'],
                ['BottomLeft', 'TopLeft'],
                ['BottomRight', 'TopRight'],
            ], render: () => {
                const minWidth = listSizeConstraints?.minWidth ||
                    computedCSSVars['--ab-cmp-select-menu__min-width'] ||
                    240;
                const maxWidth = listSizeConstraints?.maxWidth ||
                    computedCSSVars['--ab-cmp-select-menu__max-width'] ||
                    '60vw';
                const minHeight = listSizeConstraints?.minHeight || 200;
                const maxHeight = listSizeConstraints?.maxHeight ||
                    computedCSSVars['--ab-cmp-select-menu__max-height'] ||
                    '50vh';
                const resizable = getProps().resizable;
                const treeListStyle = resizable
                    ? { ...sizeFull }
                    : {
                        width: size.width,
                        height: size.height,
                        maxWidth,
                        minHeight,
                        maxHeight,
                        minWidth,
                    };
                if (!hasChildren) {
                    // @ts-ignore - don't leave any space for the > expand icon, as there are no children
                    treeListStyle['--infinite-group-row-column-nesting'] = 'var(--ab-space-2)';
                }
                const treeList = (React.createElement(TreeList, { primaryKey: props.primaryKey ?? 'id', treeFilterFunction: filterFunction, columnHeaderHeight: 32, onReady: ({ api }) => {
                        setTreeListApi(api);
                        api.focus();
                    }, defaultTreeExpandState: treeExpandState, onTreeExpandStateChange: setTreeExpandState, columns: columns, options: props.options, treeSelection: treeSelection, onTreeSelectionChange: withSelectedLeafNodesOnly(onChange), style: treeListStyle }));
                let children = (React.createElement(Flex, { flexDirection: 'column', height: '100%' },
                    React.createElement(Flex, { backgroundColor: 'defaultbackground', p: 1, alignItems: 'center', justifyContent: 'stretch', justifyItems: 'stretch' },
                        React.createElement(Input, { "data-name": "menulist-search-input", placeholder: "Search...", style: { width: '100%' }, value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
                    treeList));
                if (resizable) {
                    const onResizeStop = (_e, _direction, ref) => {
                        const newSize = {
                            width: ref.style.width,
                            height: ref.style.height,
                        };
                        setSize(newSize);
                    };
                    children = (React.createElement(Resizable, { enable: resizableDirections, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight, defaultSize: size, onResizeStop: onResizeStop, onResizeStart: (e) => {
                            // in order to prevent focus from being lost
                            e.preventDefault();
                        } }, children));
                }
                return (React.createElement(Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container", style: {
                        fontSize: 'var(--ab-cmp-select__font-size)',
                    } }, children));
            } },
            React.createElement(FieldWrap, { style: { width: '100%', ...props.fieldStyle } },
                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', style: {
                        width: '100%',
                    }, pr: props.clearable ? 0 : undefined, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                        if (!visible) {
                            setVisible(true);
                        }
                        treeListApi?.focus();
                    } }),
                props.clearable && (React.createElement(SimpleButton, { style: {
                        visibility: Array.isArray(value) && value.length > 0 ? 'visible' : 'hidden',
                    }, variant: "text", icon: "close", onClick: () => onChange({ selectedPaths: [] }) }))))));
}
