"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _Focusable = require("../common/Focusable");
var _ToggleButtonSt = require("./ToggleButton.st.css.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Text = _interopRequireDefault(require("../Text"));
var _constants = require("./constants");
var _context = require("../WixDesignSystemProvider/context");
var _ButtonCore = _interopRequireDefault(require("../Button/ButtonCore"));
var _excluded = ["children", "size", "shape", "skin", "tooltipProps", "labelValue", "selected", "interactive", "dataHook", "labelPlacement", "labelEllipsis", "disabled", "border", "tooltipDisabled", "className"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ToggleButton/ToggleButton.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); }
var Icon = _ref => {
  var _icon$props;
  var {
    children,
    hasIcon,
    size,
    shape,
    border,
    labelPlacement,
    focusableOnBlur,
    focusableOnFocus,
    className
  } = _ref;
  var iconSize = _constants.iconChildSize[size];
  var isLabelOutside = shape === 'round' && (labelPlacement === 'end' || labelPlacement === 'start');
  var isLabelStart = labelPlacement === 'start';
  var isLabelEnd = labelPlacement === 'end' || shape === 'pill' && !isLabelStart;
  var [first, second] = _react.default.Children.map(children, child => child);
  var icon = isLabelStart ? second : first;
  var topOutsideLabel = isLabelOutside && isLabelStart ? first : null;
  var topInsideLabel = !isLabelOutside && isLabelStart ? first : null;
  var bottomInsideLabel = !isLabelOutside && isLabelEnd ? second : null;
  var bottomOutsideLabel = isLabelOutside && isLabelEnd ? second : null;

  // TODO page is scrolled whenever icon focused and we press Space button

  return children && /*#__PURE__*/_react.default.createElement("span", {
    className: _ToggleButtonSt.classes.labelContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 7
    }
  }, topOutsideLabel, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.icon, {
      size,
      border
    }, className),
    onBlur: focusableOnBlur,
    onFocus: focusableOnFocus,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 62,
      columnNumber: 9
    }
  }, topInsideLabel, /*#__PURE__*/(0, _react.cloneElement)(icon, {
    className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.rootIcon, {
      iconOnly: hasIcon && (!first || !second || shape === 'round')
    }, (_icon$props = icon.props) == null ? void 0 : _icon$props.className),
    width: iconSize,
    height: iconSize
  }), bottomInsideLabel), bottomOutsideLabel);
};
var ToggleButtonIcon = (0, _Focusable.withFocusable)(Icon);
class ToggleButton extends _react.PureComponent {
  constructor() {
    super(...arguments);
    this.renderLabel = () => {
      var {
        disabled,
        size,
        labelValue,
        labelPlacement,
        labelEllipsis,
        shape
      } = this.props;
      return /*#__PURE__*/_react.default.createElement(_Text.default, {
        className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.label, {
          placement: shape !== _constants.SHAPES['pill'] && labelPlacement,
          size,
          shape
        }),
        disabled: disabled,
        dataHook: _constants.dataHooks.label,
        weight: "thin",
        ellipsis: labelEllipsis,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 111,
          columnNumber: 7
        }
      }, labelValue);
    };
  }
  render() {
    var _this$props = this.props,
      {
        children,
        size = ToggleButton.defaultProps.size,
        shape = ToggleButton.defaultProps.shape,
        skin,
        tooltipProps,
        labelValue,
        selected,
        interactive,
        dataHook,
        labelPlacement,
        labelEllipsis,
        disabled,
        border = ToggleButton.defaultProps.border,
        tooltipDisabled,
        className
      } = _this$props,
      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var hasIcon = Boolean(children && _react.default.Children.count(children) > 0);
    return /*#__PURE__*/_react.default.createElement(_context.WixDesignSystemContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 150,
        columnNumber: 7
      }
    }, _ref2 => {
      var {
        mobile
      } = _ref2;
      return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
        className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.tooltip, {
          disabled,
          interactive
        })
      }, tooltipProps, {
        size: "small",
        content: labelValue,
        disabled: !labelValue || tooltipDisabled || (tooltipProps == null ? void 0 : tooltipProps.disabled) || labelPlacement !== 'tooltip' || shape === 'pill' || mobile,
        "data-hook": dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 152,
          columnNumber: 11
        }
      }), /*#__PURE__*/_react.default.createElement(_ButtonCore.default, (0, _extends2.default)({}, rest, {
        type: undefined,
        onFocus: rest == null ? void 0 : rest.onFocus,
        onBlur: rest == null ? void 0 : rest.onBlur,
        className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.root, {
          disabled,
          selected,
          interactive,
          skin,
          labelPlacement,
          shape,
          mobile,
          size,
          hasIcon
        }, className),
        contentClassName: _ToggleButtonSt.classes.btnContent,
        "data-hook": _constants.dataHooks.button,
        "data-placement": labelPlacement,
        "data-selected": selected,
        "data-skin": skin,
        "data-shape": shape,
        "aria-pressed": selected,
        disabled: disabled,
        "aria-label": labelValue == null ? void 0 : labelValue.toString(),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 167,
          columnNumber: 13
        }
      }), /*#__PURE__*/_react.default.createElement(ToggleButtonIcon, {
        hasIcon: hasIcon,
        size: size,
        shape: shape,
        border: border,
        labelPlacement: labelPlacement,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 197,
          columnNumber: 15
        }
      }, labelPlacement === 'start' ? this.renderLabel() : null, children, labelPlacement === 'end' || shape === _constants.SHAPES['pill'] && labelPlacement !== 'start' ? this.renderLabel() : null), labelPlacement === 'bottom' && shape !== _constants.SHAPES['pill'] ? this.renderLabel() : null));
    });
  }
}
ToggleButton.displayName = 'ToggleButton';
ToggleButton.defaultProps = {
  skin: 'standard',
  size: 'medium',
  shape: 'square',
  border: false,
  interactive: true,
  disabled: false,
  labelValue: '',
  labelPlacement: 'tooltip',
  labelEllipsis: false,
  tooltipProps: {
    placement: 'top'
  }
};
var _default = exports.default = ToggleButton;
//# sourceMappingURL=ToggleButton.js.map