import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "onClick", "className", "main", "icon", "type"];
import _JSXStyle from "../styled-jsx.es.js";
/* "use client" */

import React, { useMemo } from 'react';
import useTheme from '../use-theme';
import { getColor } from './styles';
import { useButtonDropdown } from './button-dropdown-context';
import Loading from '../loading';
import useScale from '../use-scale';
var ButtonDropdownItem = function ButtonDropdownItem(_ref) {
  var children = _ref.children,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$main = _ref.main,
    main = _ref$main === void 0 ? false : _ref$main,
    icon = _ref.icon,
    selfType = _ref.type,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  var _useButtonDropdown = useButtonDropdown(),
    parentType = _useButtonDropdown.type,
    disabled = _useButtonDropdown.disabled,
    loading = _useButtonDropdown.loading;
  var type = main ? parentType : selfType;
  var colors = getColor(theme.palette, type, disabled);
  var clickHandler = function clickHandler(event) {
    if (disabled || loading) return;
    onClick && onClick(event);
  };
  var cursor = useMemo(function () {
    if (loading) return 'default';
    return disabled ? 'not-allowed' : 'pointer';
  }, [loading, disabled]);
  return /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["352843599", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
  }), loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
    style: {
      color: colors.color,
      // height: SCALES.height(2.5),
      width: SCALES.height(2.5)
    },
    className: _JSXStyle.dynamic([["352843599", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]])
  }, icon), children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "352843599",
    dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]
  }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;gap:2;-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--helpdice-ui-dropdown-height);min-width:var(--helpdice-ui-dropdown-min-width);padding:var(--helpdice-ui-dropdown-padding);font-size:var(--helpdice-ui-dropdown-font-size);}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
};
ButtonDropdownItem.displayName = 'ButtonDropdownItem';
export default ButtonDropdownItem;