"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Option = Option;
var _react = _interopRequireDefault(require("react"));
var _useOption2 = require("@mui/base/useOption");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../../..");
var _Select = require("../Select.styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
var StyledTypography = (0, _styledComponents.default)(_.Typography).withConfig({
  displayName: "Option__StyledTypography",
  componentId: "sc-1hliojv-0"
})(["display:inline-block;white-space:nowrap;width:100%;", ""], _Select.ellipsis);
var StyledFlex = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "Option__StyledFlex",
  componentId: "sc-1hliojv-1"
})(["min-width:0;"]);
var Item = _styledComponents.default.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 = _styledComponents.default.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';
});
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;
  var _useOption = (0, _useOption2.useOption)({
      value: value,
      disabled: disabled,
      label: label
    }),
    getRootProps = _useOption.getRootProps,
    highlighted = _useOption.highlighted,
    selected = _useOption.selected;
  return _react.default.createElement(Item, _extends({}, getRootProps(), {
    $highlighted: highlighted,
    className: className
  }), _react.default.createElement(_.Flexbox, {
    container: true,
    alignItems: "center",
    alignContent: "center",
    gap: 2,
    justifyContent: "space-between"
  }, _react.default.createElement(StyledFlex, {
    item: true
  }, children || _react.default.createElement(StyledTypography, {
    type: "secondary"
  }, label)), _react.default.createElement(_.Flexbox, {
    item: true
  }, multiple ? _react.default.createElement(CheckmarkBox, {
    $selected: selected
  }, selected && _react.default.createElement(_.Icon.Check12, {
    color: function color(t) {
      return t.colorTokens.neutral.icon_strong;
    }
  })) : selected && _react.default.createElement(_.Icon.CheckCircleFill16, {
    color: function color(t) {
      return t.colorTokens.action.icon_default;
    }
  }))));
}