import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// @ts-nocheck
import { useState, useCallback } from 'react';
import styled, { css } 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';
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;
  border: 1px solid ${getThemePropSelector('backgroundLevel1')};
  z-index: ${zIndex.dropdown};
  max-height: 200px;
  min-width: 100%;
  overflow: auto;
  border-bottom: 0.3px solid ${getThemePropSelector('border')};
  ${(props) => {
    if (props.size &&
        props.triggerSize &&
        props.triggerSize.x + props.size.width > window.innerWidth) {
        return css `
        right: 0;
        top: 100%;
      `;
    }
    else if (props.size &&
        props.triggerSize &&
        props.triggerSize.y + props.size.height > window.innerHeight) {
        return css `
        left: 0;
        bottom: ${props.triggerSize.height + 'px'};
      `;
    }
    else {
        return css `
        left: 0;
        top: 100%;
      `;
    }
}};
`;
const DropdownMenuItemStyled = styled.li `
  display: flex;
  align-items: center;
  padding: ${spacing.r16};
  white-space: nowrap;
  cursor: pointer;
  font-size: ${fontSize.base};

  ${css `
    background-color: ${getThemePropSelector('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 TriggerStyled = ButtonStyled.withComponent('div');
function Dropdown({ items, text, icon, size = 'base', variant = 'buttonSecondary', title, caret = true, ...rest }) {
    const [open, setOpen] = useState(false);
    const [menuSize, setMenuSize] = useState();
    const [triggerSize, setTriggerSize] = useState();
    const refMenuCallback = useCallback((node) => {
        if (node !== null) {
            setMenuSize(node.getBoundingClientRect());
        }
    }, []);
    const refTriggerCallback = useCallback((node) => {
        if (node !== null) {
            setTriggerSize(node.getBoundingClientRect());
        }
    }, []);
    return (_jsx(DropdownStyled, { active: open, variant: variant, className: "sc-dropdown", ...rest, children: _jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", onBlur: () => setOpen(!open), onFocus: () => setOpen(!open), onClick: (event) => event.stopPropagation(), tabIndex: "0", title: title, ref: refTriggerCallback, 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" }) })), open && (_jsx(DropdownMenuStyled, { className: "menu-item", postion: 'right', ref: refMenuCallback, size: menuSize, triggerSize: triggerSize, children: items.map(({ label, onClick, ...itemRest }) => {
                        return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", onClick: onClick, variant: variant, ...itemRest, children: label }, label));
                    }) }))] }) }));
}
export { Dropdown };
