"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Option = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _ = require("../../../../..");
var _Checkbox = require("../../../Checkbox");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var FullHeightFlexbox = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "MultiSelectList__FullHeightFlexbox",
  componentId: "sc-t99lxd-0"
})(["height:100%;"]);
var hoverIfNotKeyboardNav = (0, _styledComponents.css)(["", ""], function (p) {
  return p.disabled || p.isKeyboardNavigation ? '' : "\n&:hover {\n  background: ".concat(p.theme.color.inputHover, ";\n  input + ").concat(_Checkbox.Checkbox.components.CheckmarkBox, " {\n    &::before {\n      border: 1px solid ").concat(p.theme.color.cta, ";\n    }\n  }\n}\n");
});
var StyledOption = _styledComponents.default.div.withConfig({
  displayName: "MultiSelectList__StyledOption",
  componentId: "sc-t99lxd-1"
})(["", " ", " white-space:nowrap;background:", ";cursor:pointer;", " ", ""], function (p) {
  return !p.selectAll ? '' : "\nborder-bottom: 1px solid ".concat(p.theme.color.divider, ";\nbox-sizing: border-box;\n");
}, function (p) {
  return !p.fullscreenOnMobile ? "  padding-right: ".concat(p.theme.spacing.unit(3), "px;\n  padding-left: ").concat(p.theme.spacing.unit(3), "px;\n\theight: ").concat(p.theme.spacing.unit(7), "px;") : "\n\t\t\tpadding-right: ".concat(p.theme.spacing.unit(1), "px;\n  padding-left: ").concat(p.theme.spacing.unit(1), "px;\n\theight: ").concat(p.theme.spacing.unit(10), "px;\n\tborder-bottom: 1px solid ").concat(p.theme.color.divider, ";\n");
}, function (p) {
  if (p.focused && p.isKeyboardNavigation) return p.theme.color.inputBackground;
  return p.theme.color.selectOptionBackground;
}, hoverIfNotKeyboardNav, function (p) {
  return p.disabled ? "\n        color: ".concat(p.theme.color.disabledText, ";\n        pointer-events: none;\n      ") : "";
});
var Checkbox16px = (0, _styledComponents.default)(_Checkbox.Checkbox).withConfig({
  displayName: "MultiSelectList__Checkbox16px",
  componentId: "sc-t99lxd-2"
})(["", "{width:16px;height:16px;}"], _Checkbox.Checkbox.components.CheckmarkBox);
var FlexboxWidth = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "MultiSelectList__FlexboxWidth",
  componentId: "sc-t99lxd-3"
})(["flex:1 1 100%;min-width:0;"]);
var EllipsizingText = (0, _styledComponents.default)(_.Typography).withConfig({
  displayName: "MultiSelectList__EllipsizingText",
  componentId: "sc-t99lxd-4"
})(["width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
var Option = exports.Option = function Option(_ref) {
  var label = _ref.label,
    disabled = _ref.disabled,
    selected = _ref.selected,
    focused = _ref.focused,
    selectAll = _ref.selectAll,
    isKeyboardNavigation = _ref.isKeyboardNavigation,
    fullscreenOnMobile = _ref.fullscreenOnMobile;
  return _react.default.createElement(StyledOption, {
    selected: selected,
    disabled: disabled,
    selectAll: selectAll,
    focused: isKeyboardNavigation ? focused : false,
    isKeyboardNavigation: isKeyboardNavigation,
    fullscreenOnMobile: fullscreenOnMobile
  }, _react.default.createElement(FullHeightFlexbox, {
    container: true,
    alignItems: "center",
    gap: 2
  }, _react.default.createElement(_.Flexbox, {
    item: true,
    container: true,
    alignItems: "center",
    flex: "0 0 auto"
  }, _react.default.createElement(Checkbox16px, {
    width: "16px",
    name: "example",
    label: "",
    checked: selected,
    readOnly: true,
    visuallyFocused: !disabled && isKeyboardNavigation ? focused : false
  })), _react.default.createElement(FlexboxWidth, {
    item: true,
    container: true,
    justifyContent: "space-between",
    alignItems: "center"
  }, _react.default.createElement(EllipsizingText, {
    type: "secondary",
    color: disabled ? function (t) {
      return t.color.disabledText;
    } : function (t) {
      return t.color.text;
    }
  }, label))));
};