import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { ButtonStyled, ButtonIcon, ButtonText, } from '../button/Button.component';
import { zIndex } from '../../style/theme';
import { spacing } from '../../spacing';
import { fontSize } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
import { Icon } from '../icon/Icon.component';
import { useSelect } from 'downshift';
import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
const DropdownStyled = styled.div `
  position: relative;
  user-select: none;
  cursor: pointer;
  .trigger {
    margin: 0;
    border-radius: 0;
  }
`;
const DropdownMenuStyled = styled.ul `
  position: absolute;
  margin: 0;
  padding: 0;
  top: 50px;
  border: 1px solid ${getThemePropSelector('backgroundLevel1')};
  z-index: ${zIndex.dropdown};
  max-height: 200px;
  min-width: 100%;
  overflow: auto;
  border-bottom: 0.3px solid ${getThemePropSelector('border')};
  display: ${(props) => (props.isOpen ? 'auto' : 'none')};
`;
const DropdownMenuItemStyled = styled.li `
  display: flex;
  align-items: center;
  padding: ${spacing.r16};
  white-space: nowrap;
  cursor: pointer;
  font-size: ${fontSize.base};
  ${(props) => {
    return props.isSelected
        ? `background-color: ${props.theme.highlight};`
        : `background-color: ${props.theme.backgroundLevel1};`;
}}

  color: ${getThemePropSelector('textPrimary')};
  border-top: 0.3px solid ${getThemePropSelector('border')};
  border-left: 0.3px solid ${getThemePropSelector('border')};
  border-right: 0.3px solid ${getThemePropSelector('border')};

  &:hover {
    background-color: ${getThemePropSelector('highlight')};
  }
  &:active {
    background-color: ${getThemePropSelector('highlight')};
  }
`;
const Caret = styled.span `
  margin-left: ${spacing.r16};
`;
const Trigger = ButtonStyled.withComponent('div');
const TriggerStyled = styled(Trigger) `
  // :focus-visible is the keyboard-only version of :focus
  &:focus-visible {
    ${FocusVisibleStyle}
    color: ${(props) => props.theme.textPrimary};
  }
`;
function Dropdown({ items, text, icon, size = 'base', variant = 'buttonSecondary', title, caret = true, ...rest }) {
    const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, } = useSelect({
        items,
        itemToString: (item) => (item === null || item === void 0 ? void 0 : item.label) || '',
    });
    return (_jsx(DropdownStyled, { active: open, variant: variant, className: "sc-dropdown", ...rest, children: _jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", title: title, ...getToggleButtonProps(), children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), text && _jsx(ButtonText, { className: "sc-trigger-text", children: text }), caret && (_jsx(Caret, { children: _jsx(Icon, { name: "Dropdown-down" }) })), _jsx(DropdownMenuStyled, { className: "menu-item", isOpen: isOpen, ...getMenuProps(), children: items.map((item, index) => {
                        return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", variant: item.variant, ...item, ...getItemProps({
                                item,
                                index,
                                onClick: item.onClick,
                            }), isSelected: index === highlightedIndex, children: item.label }, item.label));
                    }) })] }) }));
}
export { Dropdown };
