import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { Input, Menu as AntdMenu, Tag } from 'antd';
import styled from 'styled-components';
import FlexSearch from 'flexsearch';
import { LockOutlined } from '@ant-design/icons';
import { ButtonDropdown } from './ButtonDropdown';
import { useDeepMemo } from '../hooks';
import { getNameMemberPairs } from '../shared/members';
const Menu = styled(AntdMenu) `
  max-height: 320px;
  overflow: hidden auto;
  padding-top: 0;

  li.ant-dropdown-menu-item-active {
    background: #f3f3fb;
  }
`;
const SearchMenuItem = styled.li `
  position: sticky !important;
  top: 0  !important;
  // this isn't the best solution ever, but according to the situation other solutions are worse
  // antd uses double class pattern (.disabled.active.active) to override the value of background color. actually the
  // easiest way to override it is to use smtn with higher specificity
  background: white !important;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  cursor: default;
  z-index: 9;

  ::after {
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    bottom: -20px;
    height: 20px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    ) !important;
  }
`;
function filterMembersByKeys(members, keys) {
    const cubeNames = keys.map((key) => key.split('.')[0]);
    return members
        .filter(({ cubeName }) => cubeNames.includes(cubeName))
        .map((cube) => {
        return {
            ...cube,
            members: cube.members.filter(({ name }) => keys.includes(name)),
        };
    });
}
export default function MemberMenu({ availableCubes, showNoMembersPlaceholder = true, onClick, ...buttonProps }) {
    const searchInputRef = useRef(null);
    const index = useRef(new FlexSearch.Index({ tokenize: 'forward' })).current;
    const [search, setSearch] = useState('');
    const [filteredKeys, setFilteredKeys] = useState([]);
    const hasMembers = availableCubes.some((cube) => cube.members.length > 0);
    const indexedMembers = useDeepMemo(() => {
        getNameMemberPairs(availableCubes).forEach(([name, { title }]) => index.add(name, title));
        return Object.fromEntries(getNameMemberPairs(availableCubes));
    }, [availableCubes]);
    useEffect(() => {
        let currentSearch = search;
        (async () => {
            const results = await index.search(search);
            if (currentSearch !== search) {
                return;
            }
            setFilteredKeys(results);
        })();
        return () => {
            currentSearch = '';
        };
    }, [index, search]);
    const [show, setShow] = useState(false);
    const members = search
        ? filterMembersByKeys(availableCubes, filteredKeys)
        : availableCubes;
    return (_jsx(ButtonDropdown, { show: show, ...buttonProps, overlayStyles: {
            minWidth: 280
        }, onOverlayClose: () => {
            setShow(false);
            setFilteredKeys([]);
            setSearch('');
            searchInputRef.current?.setValue('');
        }, onOverlayOpen: () => setShow(true), onClick: () => {
            // we need to delay focusing since React needs to render <Menu /> first :)
            setTimeout(() => {
                searchInputRef.current?.focus({ preventScroll: true });
            });
        }, overlay: _jsx("div", { className: "test", children: _jsx(Menu, { className: "ant-dropdown-menu ant-dropdown-menu-root", onKeyDown: (e) => {
                    if ([
                        'ArrowDown',
                        'ArrowUp',
                        'ArrowLeft',
                        'ArrowRight',
                        'Enter',
                        'Escape',
                        'Tab',
                        'CapsLock',
                    ].includes(e.key)) {
                        return;
                    }
                    if (document.activeElement === searchInputRef.current?.input)
                        return;
                    searchInputRef.current?.focus({ preventScroll: true });
                }, onClick: (event) => {
                    if (['__not-found__', '__search_field__'].includes(event.key)) {
                        return;
                    }
                    setSearch('');
                    setFilteredKeys([]);
                    onClick(indexedMembers[event.key]);
                    searchInputRef.current?.setValue('');
                    setShow(false);
                }, children: hasMembers ? (_jsxs(_Fragment, { children: [_jsx(SearchMenuItem, { id: "hhhh", className: "ant-menu-item ant-menu-item-active ant-menu-item-disabled ant-menu-item-only-child", children: _jsx(Input, { ref: searchInputRef, placeholder: "Search", autoFocus: true, allowClear: true, onKeyDown: (event) => {
                                    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
                                        event.preventDefault();
                                    }
                                    if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
                                        event.stopPropagation();
                                    }
                                }, onChange: (event) => {
                                    setSearch(event.target.value);
                                } }) }), members.map((cube) => {
                            if (!cube.members.length) {
                                return null;
                            }
                            return (_jsx(Menu.ItemGroup, { title: cube.type ? (_jsxs("span", { children: [cube.cubeTitle, ' ', cube.public === false ? _jsx(LockOutlined, {}) : null, ' ', _jsx(Tag, { color: cube.type === 'view' ? '#D26E0B' : '#7A77FF', style: {
                                                padding: '0 4px',
                                                lineHeight: 1.5,
                                            }, children: cube.type })] })) : (cube.cubeTitle), children: cube.members.map((m) => (_jsxs(Menu.Item, { "data-testid": m.name, className: "ant-dropdown-menu-item", children: [m.shortTitle, ' ', m.isVisible === false ? _jsx(LockOutlined, {}) : null] }, m.name))) }, cube.cubeName));
                        })] })) : showNoMembersPlaceholder ? (_jsx(Menu.Item, { disabled: true, children: "No members found" }, "__not-found__")) : null }) }) }));
}
//# sourceMappingURL=MemberDropdown.js.map