"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 _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _useFocusRing = require("../providers/useFocusRing/useFocusRing");
var _useId = require("../utils/useId");
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Text = _interopRequireDefault(require("../Text"));
var _Image = _interopRequireDefault(require("../Image"));
var _constants = require("./constants");
var _AddItemSt = require("./AddItem.st.css.js");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["theme", "size", "alignItems", "removePadding", "borderRadius", "disabled", "className", "onClick", "ariaLabel", "icon", "children", "subtitle", "dataHook", "tooltipProps", "tooltipContent", "showIcon"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AddItem/AddItem.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 illustrationDimensions = {
  tiny: {
    height: 24,
    width: 24
  },
  small: {
    height: 60,
    width: 60
  },
  medium: {
    height: 120,
    width: 120
  },
  large: {
    height: 120,
    width: 120
  }
};
var tooltipPlacementByAlignment = {
  left: 'top-start',
  right: 'top-end',
  center: 'top'
};
var AddItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  var {
      theme = 'dashes',
      // TODO: add default skin
      size = 'tiny',
      alignItems = 'center',
      removePadding = false,
      borderRadius,
      disabled,
      className,
      onClick,
      ariaLabel,
      icon,
      children,
      subtitle,
      dataHook,
      tooltipProps,
      tooltipContent,
      showIcon = true
    } = _ref,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('AddItem', {
    Add: _wixUiIconsCommon.Add,
    AddItemLarge: _system.AddItemLarge,
    AddItemMedium: _system.AddItemMedium,
    AddItemSmall: _system.AddItemSmall,
    AddMedia: _system.AddMedia
  });
  var skin = props.skin || theme;
  var buttonRef = _react.default.useRef(null);
  (0, _react.useEffect)(() => {
    if (theme) {
      (0, _deprecationLog.default)('<AddItem/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
    }
  }, [theme]);
  (0, _react.useImperativeHandle)(ref, () => ({
    focus: () => {
      var _buttonRef$current;
      (_buttonRef$current = buttonRef.current) == null || _buttonRef$current.focus();
    },
    blur: () => {
      var _buttonRef$current2;
      (_buttonRef$current2 = buttonRef.current) == null || _buttonRef$current2.blur();
    }
  }));
  var iconElement = (0, _react.useMemo)(() => {
    if (!showIcon) {
      return;
    }
    if (!icon) {
      var isImageIcon = skin === 'image';
      if (isImageIcon) {
        return /*#__PURE__*/_react.default.createElement(icons.AddMedia, {
          "data-hook": _constants.dataHooks.defaultIcon,
          className: _AddItemSt.classes.icon,
          width: "31",
          height: "31",
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 103,
            columnNumber: 13
          }
        });
      }
      if (size === 'tiny') {
        return /*#__PURE__*/_react.default.createElement(icons.Add, {
          "data-hook": _constants.dataHooks.defaultIcon,
          className: _AddItemSt.classes.icon,
          width: "24",
          height: "24",
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 114,
            columnNumber: 13
          }
        });
      }
      if (size === 'small') {
        return /*#__PURE__*/_react.default.createElement(icons.AddItemSmall, {
          "data-hook": _constants.dataHooks.defaultIcon,
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 124,
            columnNumber: 18
          }
        });
      }
      if (size === 'medium') {
        return /*#__PURE__*/_react.default.createElement(icons.AddItemMedium, {
          "data-hook": _constants.dataHooks.defaultIcon,
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 128,
            columnNumber: 18
          }
        });
      }
      return /*#__PURE__*/_react.default.createElement(icons.AddItemLarge, {
        "data-hook": _constants.dataHooks.defaultIcon,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 131,
          columnNumber: 16
        }
      });
    }
    if (typeof icon === 'string') {
      return /*#__PURE__*/_react.default.createElement(_Image.default, (0, _extends2.default)({
        className: _AddItemSt.classes.illustration,
        fit: "contain",
        src: icon
      }, illustrationDimensions[size], {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 135,
          columnNumber: 11
        }
      }));
    }
    return icon;
  }, [icon, size, skin, showIcon, icons]);
  var textElement = (0, _react.useMemo)(() => {
    if (!children || skin === 'image') {
      return;
    }
    var textSize = size === 'tiny' ? 'small' : 'medium';
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _AddItemSt.st)(_AddItemSt.classes.textWrapper, {
        size
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 152,
        columnNumber: 9
      }
    }, typeof children === 'function' ? children() : /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: _AddItemSt.classes.textContent,
      weight: "thin",
      skin: "standard",
      size: textSize,
      dataHook: _constants.dataHooks.itemText,
      ellipsis: true,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 156,
        columnNumber: 13
      }
    }, children));
  }, [children, size, skin]);
  var subtitleElement = (0, _react.useMemo)(() => {
    return subtitle && /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: (0, _AddItemSt.st)(_AddItemSt.classes.subtitle, {
        size
      }),
      size: "small",
      dataHook: _constants.dataHooks.itemSubtitle,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 174,
        columnNumber: 11
      }
    }, subtitle);
  }, [subtitle, size]);
  var commonButtonProps = {
    className,
    onClick,
    disabled,
    skin,
    size,
    ariaLabel,
    borderRadius,
    removePadding,
    alignItems,
    icon: iconElement,
    text: textElement,
    subtitle: subtitleElement
  };

  // TODO: remove this once we deprecate content usage thhrough tooltip
  // @ts-expect-error
  var tooltip = tooltipContent || (tooltipProps == null ? void 0 : tooltipProps.content);
  var tooltipId = (0, _useId.useId)('additem-tooltip_');
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '100%',
      height: '100%'
    },
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 206,
      columnNumber: 7
    }
  }, tooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
    content: tooltip,
    className: _AddItemSt.classes.tooltip,
    flip: skin === 'image',
    moveBy: {
      y: skin === 'image' ? -12 : 0
    },
    dataHook: _constants.dataHooks.itemTooltip,
    placement: tooltipPlacementByAlignment[alignItems],
    "aria-describedby": tooltipId
  }, tooltipProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 208,
      columnNumber: 11
    }
  }), _ref2 => {
    var {
      onFocus,
      onBlur
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement(AddItemButton, (0, _extends2.default)({
      ref: buttonRef,
      ariaDescribedBy: tooltipId
    }, commonButtonProps, {
      onFocus: onFocus,
      onBlur: onBlur,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 219,
        columnNumber: 15
      }
    }));
  }), !tooltip && /*#__PURE__*/_react.default.createElement(AddItemButton, (0, _extends2.default)({
    ref: buttonRef
  }, commonButtonProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 229,
      columnNumber: 22
    }
  })));
});
var AddItemButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
  var {
    className,
    onClick,
    disabled,
    size,
    ariaLabel,
    borderRadius,
    alignItems = 'center',
    removePadding,
    skin,
    icon,
    text,
    subtitle,
    ariaDescribedBy,
    onFocus: _onFocus,
    onBlur: _onBlur
  } = _ref3;
  var {
    isFocusVisible,
    focusProps
  } = (0, _useFocusRing.useFocusRing)();
  return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
    ref: ref,
    "data-hook": _constants.dataHooks.addItem,
    className: (0, _AddItemSt.st)(_AddItemSt.classes.root, {
      skin,
      size,
      removePadding,
      borderRadius,
      disabled,
      alignItems,
      'focus-visible': isFocusVisible
    }, className),
    style: {
      borderRadius
    },
    disabled: disabled,
    type: "button",
    onClick: onClick,
    "aria-label": ariaLabel,
    "aria-describedby": ariaDescribedBy
  }, focusProps, {
    onFocus: e => {
      focusProps.onFocus == null || focusProps.onFocus(e);
      _onFocus == null || _onFocus(e);
    },
    onBlur: e => {
      focusProps.onBlur == null || focusProps.onBlur(e);
      _onBlur == null || _onBlur(e);
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 278,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _AddItemSt.st)(_AddItemSt.classes.contentContainer, {
      skin,
      size,
      alignItems,
      disabled
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 310,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _AddItemSt.st)(_AddItemSt.classes.content, {
      size
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 318,
      columnNumber: 11
    }
  }, icon, text), subtitle));
});
AddItem.displayName = 'AddItem';
var _default = exports.default = AddItem;
//# sourceMappingURL=AddItem.js.map