"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.Checkbox = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _system = require("@wix/wix-ui-icons-common/system");
var _CheckboxSt = require("./Checkbox.st.css.js");
var _Text = _interopRequireDefault(require("../Text"));
var _Focusable = require("../common/Focusable");
var _generateId = require("../utils/generateId");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var DATA_ATTR = _interopRequireWildcard(require("./DataAttr"));
var _constants = require("./constants");
var _ZIndex = require("../common/ZIndex");
var _Checkbox2 = _interopRequireDefault(require("./Checkbox.semanticClassNames"));
var _visuallyHiddenSt = require("../common/styles/visuallyHidden.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Checkbox/Checkbox.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/** a simple WixStyle checkbox */
class Checkbox extends _react.PureComponent {
  constructor() {
    super(...arguments);
    // TODO fix me please. We need to get away from ids.
    this._id = "".concat(Checkbox.displayName, "-").concat((0, _generateId.generateID)());
    this.checkboxRef = /*#__PURE__*/_react.default.createRef();
    this.inputRef = /*#__PURE__*/_react.default.createRef();
    this.focus = () => {
      this.inputRef.current && this.inputRef.current.focus();
    };
    this._handleChange = event => {
      var _this$props$onChange, _this$props;
      (_this$props$onChange = (_this$props = this.props).onChange) == null || _this$props$onChange.call(_this$props, event);
    };
    this._getDataAttributes = () => {
      var {
        checked,
        indeterminate,
        disabled,
        hasError
      } = this.props;
      return {
        [DATA_ATTR.DATA_CHECK_TYPE]: indeterminate ? DATA_ATTR.CHECK_TYPES.INDETERMINATE : checked ? DATA_ATTR.CHECK_TYPES.CHECKED : DATA_ATTR.CHECK_TYPES.UNCHECKED,
        [DATA_ATTR.DATA_HAS_ERROR]: hasError && !disabled,
        [DATA_ATTR.DATA_DISABLED]: disabled
      };
    };
  }
  render() {
    var {
      id = this._id,
      checked,
      indeterminate,
      disabled,
      required,
      hasError,
      errorMessage,
      onChange,
      selectionArea,
      vAlign,
      size,
      children,
      dataHook,
      focusableOnFocus,
      focusableOnBlur,
      className,
      tooltipProps,
      tooltipContent,
      selectionAreaSkin,
      selectionAreaPadding,
      ellipsis,
      maxLines
    } = this.props;
    var isTooltipDisabled = tooltipProps && tooltipProps.disabled || disabled || !tooltipContent && (!hasError || !errorMessage);
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
      "data-hook": dataHook,
      className: (0, _CheckboxSt.st)(_CheckboxSt.classes.root, {
        vAlign,
        selectionArea,
        selectionAreaSkin,
        disabled,
        size,
        error: hasError && !disabled,
        selection: indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked',
        indeterminate,
        ellipsis
      }, className)
    }, this._getDataAttributes(), {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 101,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement("input", {
      ref: this.inputRef,
      className: _visuallyHiddenSt.classes.visuallyHidden,
      "data-hook": _constants.dataHooks.input,
      type: "checkbox",
      id: id,
      checked: checked,
      disabled: disabled,
      required: required,
      "aria-checked": indeterminate ? 'mixed' : checked,
      onChange: onChange,
      onFocus: focusableOnFocus,
      onBlur: focusableOnBlur,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 124,
        columnNumber: 9
      }
    }), /*#__PURE__*/_react.default.createElement("label", {
      htmlFor: id,
      "data-hook": _constants.dataHooks.label,
      className: _CheckboxSt.classes.label,
      onClick: e => e.stopPropagation(),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 138,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _CheckboxSt.classes.labelInner,
      style: {
        padding: selectionAreaPadding
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 144,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
      dataHook: _constants.dataHooks.boxTooltip,
      disabled: isTooltipDisabled,
      content: tooltipContent || errorMessage || ' ',
      textAlign: "center",
      maxWidth: 230,
      exitDelay: 150,
      zIndex: _ZIndex.ZIndex.checkbox
    }, tooltipProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 148,
        columnNumber: 13
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _CheckboxSt.classes.outer,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 158,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.box,
      className: (0, _CheckboxSt.st)(_CheckboxSt.classes.checkbox, _Checkbox2.default.inputContainer),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 159,
        columnNumber: 17
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _CheckboxSt.classes.inner,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 166,
        columnNumber: 19
      }
    }, indeterminate ? /*#__PURE__*/_react.default.createElement(_system.CheckboxIndeterminate, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 168,
        columnNumber: 23
      }
    }) : /*#__PURE__*/_react.default.createElement(_system.CheckboxChecked, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 170,
        columnNumber: 23
      }
    }))))), children && /*#__PURE__*/_react.default.createElement(_Text.default, {
      size: size,
      weight: "thin",
      dataHook: _constants.dataHooks.children,
      className: _CheckboxSt.classes.children,
      ellipsis: ellipsis,
      maxLines: maxLines,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 177,
        columnNumber: 15
      }
    }, children))));
  }
}
exports.Checkbox = Checkbox;
Checkbox.displayName = 'Checkbox';
Checkbox.defaultProps = {
  checked: false,
  size: _constants.LABEL_TEXT_SIZE.MEDIUM,
  selectionArea: _constants.SELECTION_AREA.NONE,
  vAlign: _constants.V_ALIGN.CENTER,
  onChange: e => e.stopPropagation(),
  hasError: false,
  disabled: false,
  indeterminate: false,
  selectionAreaSkin: _constants.SELECTION_AREA_SKIN.FILLED
};
var _default = exports.default = (0, _Focusable.withFocusable)(Checkbox);
//# sourceMappingURL=Checkbox.js.map