"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ThumbnailSt = require("./Thumbnail.st.css.js");
var _system = require("@wix/wix-ui-icons-common/system");
var _Text = _interopRequireDefault(require("../Text"));
var _Focusable = require("../common/Focusable");
var _constants = require("./constants");
var _Box = _interopRequireDefault(require("../Box"));
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Thumbnail/Thumbnail.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 isString = a => typeof a === 'string';

/**
 * Component for showing thumbnails.
 *
 * It takes full space of parent component, works well together with `<Proportion />`
 * */
var Thumbnail = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  var {
    dataHook,
    className,
    ariaLabel,
    border = true,
    children,
    title,
    description,
    image,
    size = 'medium',
    selected = false,
    disabled = false,
    hideSelectedIcon,
    backgroundImage,
    onClick,
    onMouseOver,
    width,
    height,
    contentAlignment = 'center',
    ellipsis = false,
    maxLines,
    textPosition = 'inside',
    noPadding = false,
    tooltipProps = {},
    skin = 'primary',
    focusableOnFocus,
    focusableOnBlur
  } = props;
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('Thumbnail', {
    CheckboxChecked: _system.CheckboxChecked
  });
  var thumbnailRef = (0, _react.useRef)(null);
  var hasChildren = !!children;
  var hasBackground = !!backgroundImage;
  var showBottomTitle = (hasChildren || hasBackground) && title;
  (0, _react.useImperativeHandle)(ref, () => ({
    focus: () => {
      var _thumbnailRef$current;
      (_thumbnailRef$current = thumbnailRef.current) == null || _thumbnailRef$current.focus();
    }
  }));
  var renderBackgroundLayout = () => {
    return isString(backgroundImage) ? /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.backgroundImage, {
        disabled
      }),
      "data-hook": _constants.dataHooks.thumbnailBackgroundImage,
      style: {
        backgroundImage: "url(".concat(backgroundImage, ")")
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 7
      }
    }) : backgroundImage;
  };
  var renderBottomTitle = () => {
    return /*#__PURE__*/_react.default.createElement(_Box.default, {
      align: "center",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.bottomTitle, {
        selected,
        disabled
      }),
      dataHook: _constants.dataHooks.thumbnailBottomTitle,
      size: size,
      tagName: "div",
      weight: "thin",
      ellipsis: true,
      children: title,
      tooltipProps: tooltipProps,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 9
      }
    }));
  };
  var renderThumbnailImage = () => {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.imageContainer, {
        textPosition
      }),
      "data-hook": _constants.dataHooks.thumbnailImage,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 104,
        columnNumber: 7
      }
    }, isString(image) ? /*#__PURE__*/_react.default.createElement("img", {
      src: image,
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.image, {
        textPosition
      }),
      alt: "",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 109,
        columnNumber: 11
      }
    }) : image);
  };
  var renderTitleAndDescription = () => {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.thumbnailTextContent, {
        textPosition,
        size
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 123,
        columnNumber: 7
      }
    }, title && /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.title, {
        size,
        textPosition
      }),
      dataHook: _constants.dataHooks.thumbnailTitle,
      size: size,
      weight: "normal",
      children: title,
      skin: disabled ? 'disabled' : undefined,
      ellipsis: ellipsis,
      maxLines: maxLines,
      tooltipProps: tooltipProps,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 125,
        columnNumber: 11
      }
    }), description && /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: _ThumbnailSt.classes.description,
      dataHook: _constants.dataHooks.thumbnailDescription,
      size: size,
      weight: "thin",
      secondary: true,
      children: description,
      skin: disabled ? 'disabled' : undefined,
      ellipsis: ellipsis,
      maxLines: maxLines,
      tooltipProps: tooltipProps,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 138,
        columnNumber: 11
      }
    }));
  };
  var renderSelectedIcon = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", {
    className: _ThumbnailSt.classes.selectedIcon,
    "data-hook": _constants.dataHooks.thumbnailSelectedIcon,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 157,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(icons.CheckboxChecked, {
    height: "7.8",
    width: "10",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 161,
      columnNumber: 9
    }
  })), [icons]);
  var getThumbnailContent = () => {
    /**
     * Ignores the rest of the properties and just renders children
     */
    if (hasChildren) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.customChild, {
          disabled
        }),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 173,
          columnNumber: 9
        }
      }, children);
    }

    /**
     * @deprecated flow
     */
    if (hasBackground) {
      return renderBackgroundLayout();
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.contentContainer, {
        textPosition
      }),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 185,
        columnNumber: 7
      }
    }, image && renderThumbnailImage(), textPosition === 'inside' && renderTitleAndDescription());
  };
  var renderThumbnail = () => {
    return /*#__PURE__*/_react.default.createElement("div", {
      ref: thumbnailRef,
      style: {
        height
      },
      className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.thumbnail, {
        selected,
        disabled,
        size,
        hasBackground,
        hasChildren,
        textPosition,
        contentAlignment,
        noPadding,
        border,
        skin
      }),
      "data-selected": selected,
      "data-disabled": disabled,
      tabIndex: disabled ? undefined : 0,
      "data-hook": _constants.dataHooks.thumbnailWrapper,
      onFocus: focusableOnFocus,
      onBlur: focusableOnBlur,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 194,
        columnNumber: 7
      }
    }, !hideSelectedIcon && selected && renderSelectedIcon(), getThumbnailContent());
  };
  var onKeyDown = event => {
    if (onClick && ['Enter', ' '].includes(event.key)) {
      onClick(event);
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width
    },
    className: (0, _ThumbnailSt.st)(_ThumbnailSt.classes.root, {
      disabled,
      border,
      selected,
      textPosition,
      skin
    }, className),
    "aria-label": ariaLabel,
    onClick: disabled ? undefined : onClick,
    onMouseOver: disabled ? undefined : onMouseOver,
    onKeyDown: disabled ? undefined : onKeyDown,
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 229,
      columnNumber: 5
    }
  }, renderThumbnail(), textPosition === 'outside' && renderTitleAndDescription(), showBottomTitle ? renderBottomTitle() : null);
});
Thumbnail.displayName = 'Thumbnail';
var _default = exports.default = (0, _Focusable.withFocusable)(Thumbnail);
//# sourceMappingURL=Thumbnail.js.map