import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
import { Input, Menu } from 'antd';
import { useLayoutEffect } from 'react';
import styled from 'styled-components';
import { useDeepMemo } from '../../hooks/deep-memo';
import { getMembersByCube } from '../../shared/members';
import { useCubeMemberSearch } from './cube-member-search';
const { SubMenu } = Menu;
const StyledMenu = styled(Menu) `
  position: relative;
  max-height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;

  li {
    font-size: var(--font-size-base);
  }

  .ant-menu-sub.ant-menu-inline {
    background: white;
  }

  & li > div.ant-menu-submenu-title {
    font-weight: 500;
    color: var(--menu-highlight-color);
  }

  & li.ant-menu-item-group {
    & > div {
      text-transform: uppercase;
      font-size: 10px;
    }

    & ul > li {
      padding-left: 12px !important;
    }
  }

  .ant-menu-item-group-list > li {
    margin: 0 !important;

    &::after {
      display: none;
    }
  }

  .ant-menu-item-selected,
  .ant-menu-item-active:not(.ant-menu-item-selected) {
    background: var(--primary-9) !important;
    color: var(--primary-color);
  }

  .ant-menu-item-selected.ant-menu-item-active {
    background: var(--primary-8) !important;
  }

  .ant-menu-submenu-arrow {
    left: 10px;
    right: initial;
  }
`;
const SearchInputWrapper = styled.div `
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 12px 10px 12px;

  ::after {
    z-index: 1;
    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)
    );
  }
`;
const MEMBER_TYPES = ['measures', 'dimensions', 'segments', 'timeDimensions'];
function filterMembersByCube(membersByCube, keys) {
    return membersByCube
        .map((cube) => {
        const membersByType = MEMBER_TYPES.map((type) => [
            type,
            (cube[type] || []).filter(({ name }) => keys.includes(name)),
        ]);
        if (!membersByType.some(([, members]) => members.length)) {
            return false;
        }
        return {
            ...cube,
            ...Object.fromEntries(membersByType),
        };
    })
        .filter(Boolean);
}
export function Cubes({ memberTypeCubeMap, openKeys, selectedKeys, firstOpenCubeName, onSelect, onOpenKeysChange, }) {
    const allCubeKeys = useDeepMemo(() => {
        return getMembersByCube(memberTypeCubeMap).map(({ cubeName }) => cubeName);
    }, [memberTypeCubeMap]);
    const { keys, search, inputProps } = useCubeMemberSearch(memberTypeCubeMap);
    const membersByCube = search
        ? filterMembersByCube(getMembersByCube(memberTypeCubeMap), keys)
        : getMembersByCube(memberTypeCubeMap);
    useLayoutEffect(() => {
        if (firstOpenCubeName) {
            setTimeout(() => {
                document.querySelector('[data-menu="cubes"]')?.scroll({
                    top: document.querySelector(`[data-cube="${firstOpenCubeName}"]`)?.offsetTop,
                    behavior: 'smooth',
                });
            }, 100);
        }
    }, [firstOpenCubeName]);
    return (_jsxs(_Fragment, { children: [_jsx(SearchInputWrapper, { children: _jsx(Input, { ...inputProps, allowClear: true, autoFocus: true, suffix: search ? null : _jsx(SearchOutlined, {}) }) }), _jsx(StyledMenu, { "data-menu": "cubes", selectedKeys: selectedKeys, openKeys: search ? allCubeKeys : openKeys, mode: "inline", onClick: (event) => {
                    const { membertype } = event.domEvent.currentTarget.dataset;
                    onSelect(membertype, event.key.toString().replace('td:', ''));
                }, children: membersByCube.map((cube) => {
                    return (_jsx(SubMenu, { "data-cube": cube.cubeName, title: cube.cubeTitle, onTitleClick: ({ key }) => {
                            if (openKeys.includes(key)) {
                                onOpenKeysChange(openKeys.filter((value) => value !== key));
                            }
                            else {
                                onOpenKeysChange([...openKeys, key]);
                            }
                        }, children: MEMBER_TYPES.map((memberType) => {
                            if (!cube[memberType].length) {
                                return null;
                            }
                            return (_jsx(Menu.ItemGroup, { title: memberType === 'timeDimensions'
                                    ? 'time dimensions'
                                    : memberType, children: cube[memberType].map((member) => {
                                    const key = memberType === 'timeDimensions'
                                        ? `td:${member.name}`
                                        : member.name;
                                    return (_jsxs(Menu.Item, { "data-membertype": memberType, children: [_jsx(CheckOutlined, { style: {
                                                    visibility: selectedKeys.includes(key)
                                                        ? 'visible'
                                                        : 'hidden',
                                                } }), member.shortTitle] }, key));
                                }) }, memberType));
                        }) }, cube.cubeName));
                }) })] }));
}
//# sourceMappingURL=Cubes.js.map