var _excluded = ["children", "className", "disabled", "label", "value", "multiple"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from 'react';
import { useOption } from '@mui/base/useOption';
import styled from 'styled-components';
import { Flexbox, Icon, Typography } from '../../..';
import { ellipsis } from '../Select.styles';
var StyledTypography = styled(Typography).withConfig({
  displayName: "Option__StyledTypography",
  componentId: "sc-1hliojv-0"
})(["display:inline-block;white-space:nowrap;width:100%;", ""], ellipsis);
var StyledFlex = styled(Flexbox).withConfig({
  displayName: "Option__StyledFlex",
  componentId: "sc-1hliojv-1"
})(["min-width:0;"]);
var Item = styled.li.withConfig({
  displayName: "Option__Item",
  componentId: "sc-1hliojv-2"
})(["padding:", ";color:", ";", " &:hover{background-color:", ";}&[aria-selected='true']{color:", ";}"], function (p) {
  return "".concat(p.theme.spacing.unit(1), "px\n    ").concat(p.theme.spacing.unit(3), "px\n    ");
}, function (_ref) {
  var theme = _ref.theme;
  return theme.colorTokens.neutral.text_default;
}, function (_ref2) {
  var $highlighted = _ref2.$highlighted,
    theme = _ref2.theme;
  return $highlighted ? "background-color: ".concat(theme.colorTokens.neutral.background_hover, ";") : '';
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colorTokens.neutral.background_hover;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colorTokens.action.text_default;
});
var CheckmarkBox = styled.div.withConfig({
  displayName: "Option__CheckmarkBox",
  componentId: "sc-1hliojv-3"
})(["width:", "px;height:", "px;border:1px solid ", ";background:", ";display:flex;align-items:center;justify-content:center;"], function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (_ref5) {
  var $selected = _ref5.$selected,
    theme = _ref5.theme;
  return $selected ? theme.colorTokens.action.background_default : theme.colorTokens.neutral.border_default;
}, function (_ref6) {
  var $selected = _ref6.$selected,
    theme = _ref6.theme;
  return $selected ? theme.colorTokens.action.background_default : 'transparent';
});
export function Option(props) {
  var children = props.children,
    className = props.className,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    label = props.label,
    value = props.value,
    multiple = props.multiple,
    rest = _objectWithoutProperties(props, _excluded);
  var _useOption = useOption({
      value: value,
      disabled: disabled,
      label: label
    }),
    getRootProps = _useOption.getRootProps,
    highlighted = _useOption.highlighted,
    selected = _useOption.selected;
  return React.createElement(Item, _extends({}, getRootProps(), {
    $highlighted: highlighted,
    className: className
  }, rest), React.createElement(Flexbox, {
    container: true,
    alignItems: "center",
    alignContent: "center",
    gap: 2,
    justifyContent: "space-between"
  }, React.createElement(StyledFlex, {
    item: true
  }, children || React.createElement(StyledTypography, {
    type: "secondary"
  }, label)), React.createElement(Flexbox, {
    item: true
  }, multiple ? React.createElement(CheckmarkBox, {
    $selected: selected
  }, selected && React.createElement(Icon.Check12, {
    color: function color(t) {
      return t.colorTokens.neutral.icon_strong;
    }
  })) : selected && React.createElement(Icon.CheckCircleFill16, {
    color: function color(t) {
      return t.colorTokens.action.icon_default;
    }
  }))));
}