import React from 'react';
import styled, { css } from 'styled-components';
import { Flexbox, Typography } from '../../../../..';
import { Checkbox } from '../../../Checkbox';
var FullHeightFlexbox = styled(Flexbox).withConfig({
  displayName: "MultiSelectList__FullHeightFlexbox",
  componentId: "sc-t99lxd-0"
})(["height:100%;"]);
var hoverIfNotKeyboardNav = css(["", ""], function (p) {
  return p.disabled || p.isKeyboardNavigation ? '' : "\n&:hover {\n  background: ".concat(p.theme.color.inputHover, ";\n  input + ").concat(Checkbox.components.CheckmarkBox, " {\n    &::before {\n      border: 1px solid ").concat(p.theme.color.cta, ";\n    }\n  }\n}\n");
});
var StyledOption = styled.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 = styled(Checkbox).withConfig({
  displayName: "MultiSelectList__Checkbox16px",
  componentId: "sc-t99lxd-2"
})(["", "{width:16px;height:16px;}"], Checkbox.components.CheckmarkBox);
var FlexboxWidth = styled(Flexbox).withConfig({
  displayName: "MultiSelectList__FlexboxWidth",
  componentId: "sc-t99lxd-3"
})(["flex:1 1 100%;min-width:0;"]);
var EllipsizingText = styled(Typography).withConfig({
  displayName: "MultiSelectList__EllipsizingText",
  componentId: "sc-t99lxd-4"
})(["width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
export var 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.createElement(StyledOption, {
    selected: selected,
    disabled: disabled,
    selectAll: selectAll,
    focused: isKeyboardNavigation ? focused : false,
    isKeyboardNavigation: isKeyboardNavigation,
    fullscreenOnMobile: fullscreenOnMobile
  }, React.createElement(FullHeightFlexbox, {
    container: true,
    alignItems: "center",
    gap: 2
  }, React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center",
    flex: "0 0 auto"
  }, React.createElement(Checkbox16px, {
    width: "16px",
    name: "example",
    label: "",
    checked: selected,
    readOnly: true,
    visuallyFocused: !disabled && isKeyboardNavigation ? focused : false
  })), React.createElement(FlexboxWidth, {
    item: true,
    container: true,
    justifyContent: "space-between",
    alignItems: "center"
  }, React.createElement(EllipsizingText, {
    type: "secondary",
    color: disabled ? function (t) {
      return t.color.disabledText;
    } : function (t) {
      return t.color.text;
    }
  }, label))));
};