"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CheckBox = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _uuid = require("uuid");

var _checkBoxIcon = require("../internals/check-box-icon");

var _focus = require("../../../mixins/focus");

var _spacing = require("../../../mixins/spacing");

var _stacking = require("../../../mixins/stacking");

var _stackee = require("../../../mixins/stackee");

var _branding = require("../../../mixins/branding");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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; }

var getCursor = function getCursor(_ref) {
  var isDisabled = _ref.isDisabled;
  return isDisabled ? 'default' : 'pointer';
};

var CheckBoxContainer = _styledComponents["default"].label.withConfig({
  displayName: "CheckBoxContainer",
  componentId: "sc-1yxu8pm-0"
})(["border-radius:", ";color:", ";position:relative;", " &.focus-visible-within{box-shadow:", ",", " ", ";}cursor:", ";", " ", " ", ""], _focus.focusedBorderRadius, function (_ref2) {
  var isDisabled = _ref2.isDisabled;
  return (0, _branding.getPaletteColor)(isDisabled ? 'greyscale-dark' : 'greyscale-black');
}, (0, _focus.getBaseFocusState)({
  hoverTransition: false,
  activeTransition: false,
  pointerCursor: false
}), _focus.focusedBoxShadow, _focus.focusedBorderShadow, _focus.focusedBorderColor, getCursor, _spacing.getSpacingRules, _stacking.getStackedRules, _stackee.getStackeeRules);

var LeftIcon = _styledComponents["default"].div.withConfig({
  displayName: "LeftIcon",
  componentId: "sc-1yxu8pm-1"
})(["display:flex;align-items:center;margin-left:-10px;"]);

var RightIcon = _styledComponents["default"].div.withConfig({
  displayName: "RightIcon",
  componentId: "sc-1yxu8pm-2"
})(["display:flex;align-items:center;margin-right:-10px;"]);

var InvisibleInput = _styledComponents["default"].input.withConfig({
  displayName: "InvisibleInput",
  componentId: "sc-1yxu8pm-3"
})(["height:0;width:0;margin:0;padding:0;opacity:0;position:absolute;"]);

var StyledCheckBoxIcon = (0, _styledComponents["default"])(_checkBoxIcon.CheckBoxIcon).withConfig({
  displayName: "StyledCheckBoxIcon",
  componentId: "sc-1yxu8pm-4"
})(["min-width:44px;"]);

var CheckBox = function CheckBox(_ref3) {
  var _ref3$selected = _ref3.selected,
      selected = _ref3$selected === void 0 ? false : _ref3$selected,
      onToggle = _ref3.onToggle,
      name = _ref3.name,
      _ref3$disabled = _ref3.disabled,
      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
      _ref3$spacing = _ref3.spacing,
      spacing = _ref3$spacing === void 0 ? 'ph1' : _ref3$spacing,
      grow = _ref3.grow,
      shrink = _ref3.shrink,
      basis = _ref3.basis,
      _ref3$stacked = _ref3.stacked,
      stacked = _ref3$stacked === void 0 ? 'row' : _ref3$stacked,
      _ref3$align = _ref3.align,
      align = _ref3$align === void 0 ? 'center' : _ref3$align,
      justify = _ref3.justify,
      wrap = _ref3.wrap,
      children = _ref3.children,
      _ref3$direction = _ref3.direction,
      direction = _ref3$direction === void 0 ? 'left' : _ref3$direction,
      _ref3$borderColor = _ref3.borderColor,
      borderColor = _ref3$borderColor === void 0 ? 'greyscale-dark' : _ref3$borderColor,
      _ref3$onFocus = _ref3.onFocus,
      onFocus = _ref3$onFocus === void 0 ? function () {} : _ref3$onFocus,
      _ref3$onBlur = _ref3.onBlur,
      onBlur = _ref3$onBlur === void 0 ? function () {} : _ref3$onBlur,
      className = _ref3.className,
      id = _ref3.id,
      dataQa = _ref3['data-qa'],
      dataCy = _ref3['data-cy'],
      props = _objectWithoutProperties(_ref3, ["selected", "onToggle", "name", "disabled", "spacing", "grow", "shrink", "basis", "stacked", "align", "justify", "wrap", "children", "direction", "borderColor", "onFocus", "onBlur", "className", "id", "data-qa", "data-cy"]);

  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      hasKeyboardFocus = _useState2[0],
      setKeyboardFocus = _useState2[1]; // Hack to workaround the lack of :focus-visible-within polyfill support on Chrome.


  var handleFocus = function handleFocus(e) {
    var _e$target;

    onFocus(e);
    setKeyboardFocus(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.className.includes('focus-visible'));
  };

  var handleBlur = function handleBlur(e) {
    onBlur(e);
    setKeyboardFocus(false);
  };

  var leftContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(LeftIcon, null, /*#__PURE__*/_react["default"].createElement(StyledCheckBoxIcon, {
    selected: selected,
    borderColor: borderColor
  })), children);

  var rightContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children, /*#__PURE__*/_react["default"].createElement(RightIcon, null, /*#__PURE__*/_react["default"].createElement(StyledCheckBoxIcon, {
    selected: selected,
    borderColor: borderColor
  })));

  var labelId = (0, _react.useMemo)(function () {
    return "checkbox-".concat((0, _uuid.v4)());
  }, []);
  return /*#__PURE__*/_react["default"].createElement(CheckBoxContainer, {
    spacing: spacing,
    grow: grow,
    shrink: shrink,
    basis: basis,
    stacked: stacked,
    align: align,
    justify: justify,
    wrap: wrap,
    className: hasKeyboardFocus ? "".concat(className || '', " focus-visible-within") : className,
    isDisabled: disabled,
    id: labelId,
    tabIndex: -1
  }, /*#__PURE__*/_react["default"].createElement(InvisibleInput, _extends({
    type: "checkbox",
    checked: selected,
    name: name,
    disabled: disabled,
    onChange: onToggle,
    onFocus: handleFocus,
    onBlur: handleBlur,
    id: id,
    "data-cy": dataCy,
    "data-qa": dataQa,
    "aria-labelledby": labelId
  }, props)), direction === 'left' ? leftContent : rightContent);
};

exports.CheckBox = CheckBox;
CheckBox.displayName = 'CheckBox';