import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "direction", "justify", "alignItems", "line", "showTitle", "className", "onClick", "leading", "primary", "secondary", "trailing", "selected", "disableAutoClose"];
import _JSXStyle from "../styled-jsx.es.js";
import React from 'react';
import useTheme from '../use-theme';
import useScale, { withScale } from '../use-scale';
import useClasses from '../use-classes';
var ListItemComponent = function ListItemComponent(_ref) {
  var children = _ref.children,
    _ref$direction = _ref.direction,
    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
    _ref$justify = _ref.justify,
    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
    _ref$alignItems = _ref.alignItems,
    alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
    _ref$line = _ref.line,
    line = _ref$line === void 0 ? false : _ref$line,
    _ref$showTitle = _ref.showTitle,
    showTitle = _ref$showTitle === void 0 ? false : _ref$showTitle,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    onClick = _ref.onClick,
    leading = _ref.leading,
    primary = _ref.primary,
    secondary = _ref.secondary,
    trailing = _ref.trailing,
    _ref$selected = _ref.selected,
    selected = _ref$selected === void 0 ? false : _ref$selected,
    _ref$disableAutoClose = _ref.disableAutoClose,
    disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  //   const { disableItemsAutoClose, onItemClick } = usePopoverContext()
  var hasHandler = Boolean(onClick);
  //   const dontCloseByClick = disableAutoClose || disableItemsAutoClose || showTitle || line
  var classes = useClasses('item', {
    line: line,
    showTitle: showTitle
  }, className);
  var clickHandler = function clickHandler(event) {
    onClick && onClick(event);
    // if (dontCloseByClick) {
    //   return event.stopPropagation()
    // }
    // onItemClick(event)
  };
  return /*#__PURE__*/React.createElement("li", {
    style: {
      all: 'unset',
      listStyle: 'none'
    }
  }, /*#__PURE__*/React.createElement("div", _extends({
    style: {
      backgroundColor: selected ? '#efefef' : ''
    },
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
  }), children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-left"
  }, /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]])
  }, leading), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description"
  }, /*#__PURE__*/React.createElement("p", {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description-primary"
  }, primary), secondary && /*#__PURE__*/React.createElement("small", {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-description-secondary"
  }, secondary))), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["937997701", [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + "item-right"
  }, trailing)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "937997701",
    dynamic: [direction, justify, alignItems, theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:".concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";box-sizing:border-box;-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";color:").concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item-description.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:5px;}.item-description-primary.__jsx-style-dynamic-selector{margin:0;}.item-description-secondary.__jsx-style-dynamic-selector{margin:0;}.item-left.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.7rem;}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), line && /*#__PURE__*/React.createElement(ListItem, {
    line: true,
    showTitle: false
  }));
};
ListItemComponent.displayName = 'ListItem';
var ListItem = withScale(ListItemComponent);
export default ListItem;