function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
var _excluded = ["children", "as", "label", "name", "onChange", "role", "value"],
  _excluded2 = ["children", "as", "label", "name", "onChange", "role", "value"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
import { mergeProps } from '@react-aria/utils';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import React from 'react';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { useThumbnail } from './Thumbnail.hooks';
import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledLabelText, StyledPlaceholderThumbnail, StyledThumbnailFigCaption, StyledThumbnailWrapper, StyledTickIcon } from './Thumbnail.styles';
import { getThumbnailVariantForFilename } from './Thumbnail.utils';
import { ThumbnailCaption } from './ThumbnailCaption';
import { ThumbnailPreview } from './ThumbnailPreview';
var defaultSize = 'lg';
function TickIcon(_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? defaultSize : _ref$size,
    selected = _ref.selected;
  var i18n = useI18nContext();
  return /*#__PURE__*/React.createElement(StyledTickIcon, {
    "aria-hidden": selected ? false : true,
    "aria-label": selected ? i18n.t('core.thumbnail.checked') : undefined
    // in IE11, all svg element are focusable by default
    ,
    focusable: false,
    selected: selected,
    size: size,
    width: "26",
    height: "26",
    viewBox: "0 0 26 26",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M1 13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25C6.37258 25 1 19.6274 1 13Z",
    fill: "white"
  }), /*#__PURE__*/React.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M11.167 17.5L7 13.459L8.6155 12.0535L11.167 14.5285L17.3845 8.5L19 9.9055L11.167 17.5ZM13 1C6.3715 1 1 6.373 1 13C1 19.627 6.3715 25 13 25C19.627 25 25 19.627 25 13C25 6.373 19.627 1 13 1Z",
    fill: "hsl(218,75%,50%)"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M13 24C6.92487 24 2 19.0751 2 13H0C0 20.1797 5.8203 26 13 26V24ZM24 13C24 19.0751 19.0751 24 13 24V26C20.1797 26 26 20.1797 26 13H24ZM13 2C19.0751 2 24 6.92487 24 13H26C26 5.8203 20.1797 0 13 0V2ZM13 0C5.8203 0 0 5.8203 0 13H2C2 6.92487 6.92487 2 13 2V0Z",
    fill: "white"
  }));
}
function FigCaption(_ref2) {
  var label = _ref2.label,
    disabled = _ref2.disabled;
  return label ? /*#__PURE__*/React.createElement(StyledThumbnailFigCaption, {
    $color: disabled ? 'gray70' : 'gray15'
  }, label) : null;
}
function Label(_ref3) {
  var label = _ref3.label,
    disabled = _ref3.disabled;
  return label ? /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement(StyledLabelText, {
    intent: "small",
    weight: "bold"
  }, label)) : null;
}
var BasePlaceholder = /*#__PURE__*/React.forwardRef(function BasePlaceholder(props, ref) {
  var _props$filename, _thumbnail$qa;
  var thumbnail = useThumbnail(props);
  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
    ref: ref,
    layout: thumbnail.layout,
    size: thumbnail.size
  }, props), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
    focused: thumbnail.focused,
    disabled: thumbnail.disabled,
    selected: thumbnail.selected,
    clickable: thumbnail.clickable,
    size: thumbnail.size
  }, /*#__PURE__*/React.createElement(TickIcon, {
    size: thumbnail.size,
    selected: thumbnail.toggleState.isSelected
  }), /*#__PURE__*/React.createElement(StyledFileIcon, {
    variant: props.variant || getThumbnailVariantForFilename((_props$filename = props.filename) !== null && _props$filename !== void 0 ? _props$filename : '')
  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
    label: thumbnail.label,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
    error: thumbnail.error,
    qa: (_thumbnail$qa = thumbnail.qa) === null || _thumbnail$qa === void 0 ? void 0 : _thumbnail$qa.caption,
    multiline: thumbnail.size === 'lg',
    layout: thumbnail.layout,
    caption: thumbnail.caption,
    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
    disabled: thumbnail.disabled
  }));
});
var FigurePlaceholder = /*#__PURE__*/React.forwardRef(function FigurePlaceholder(props, ref) {
  var _props$filename2, _thumbnail$qa2;
  var thumbnail = useThumbnail(props);
  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
    ref: ref,
    layout: thumbnail.layout,
    size: thumbnail.size
  }, props), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
    focused: thumbnail.focused,
    disabled: thumbnail.disabled,
    selected: thumbnail.selected,
    clickable: thumbnail.clickable,
    size: thumbnail.size,
    as: thumbnail.as
  }, /*#__PURE__*/React.createElement(TickIcon, {
    size: thumbnail.size,
    selected: thumbnail.toggleState.isSelected
  }), /*#__PURE__*/React.createElement(StyledFileIcon, {
    variant: props.variant || getThumbnailVariantForFilename((_props$filename2 = props.filename) !== null && _props$filename2 !== void 0 ? _props$filename2 : '')
  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
    label: thumbnail.label,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
    error: thumbnail.error,
    qa: (_thumbnail$qa2 = thumbnail.qa) === null || _thumbnail$qa2 === void 0 ? void 0 : _thumbnail$qa2.caption,
    multiline: thumbnail.size === 'lg',
    layout: thumbnail.layout,
    caption: thumbnail.caption,
    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
    disabled: thumbnail.disabled
  }));
});
var CheckboxPlaceholder = /*#__PURE__*/React.forwardRef(function CheckboxPlaceholder(_ref4, ref) {
  var _props$filename3, _thumbnail$qa3;
  var children = _ref4.children,
    as = _ref4.as,
    label = _ref4.label,
    name = _ref4.name,
    onChange = _ref4.onChange,
    role = _ref4.role,
    value = _ref4.value,
    props_ = _objectWithoutProperties(_ref4, _excluded);
  var props = _objectSpread(_objectSpread({}, props_), {}, {
    as: as,
    label: label,
    onChange: onChange,
    role: role,
    value: value,
    isDisabled: props_.disabled,
    isSelected: props_.checked,
    defaultSelected: props_.defaultChecked
  });
  var thumbnail = useThumbnail(props);
  var isInputFocused = document.activeElement === thumbnail.inputRef.current;
  var preventSpaceOnDisabledThumbnail = function preventSpaceOnDisabledThumbnail(e) {
    if (e.key === ' ' && thumbnail.disabled) {
      e.preventDefault();
    }
  };
  React.useEffect(function () {
    if (props.focused && thumbnail.inputRef.current) {
      thumbnail.inputRef.current.focus();
    }
  }, [props.focused, thumbnail.inputRef]);
  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
    ref: ref,
    layout: thumbnail.layout,
    size: thumbnail.size
  }, props_, {
    onClick: function onClick(e) {
      if (!thumbnail.disabled) {
        var _thumbnail$onClick;
        thumbnail.toggleState.toggle();
        (_thumbnail$onClick = thumbnail.onClick) === null || _thumbnail$onClick === void 0 ? void 0 : _thumbnail$onClick.call(thumbnail, e);
      }
    }
  }), /*#__PURE__*/React.createElement(StyledPlaceholderThumbnail, {
    focused: thumbnail.focused || isInputFocused,
    disabled: thumbnail.disabled,
    selected: thumbnail.selected,
    clickable: thumbnail.clickable,
    size: thumbnail.size
  }, /*#__PURE__*/React.createElement(TickIcon, {
    size: thumbnail.size,
    selected: thumbnail.toggleState.isSelected
  }), /*#__PURE__*/React.createElement(StyledFileIcon, {
    variant: props.variant || getThumbnailVariantForFilename((_props$filename3 = props.filename) !== null && _props$filename3 !== void 0 ? _props$filename3 : '')
  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
    label: thumbnail.label,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
    error: thumbnail.error,
    qa: (_thumbnail$qa3 = thumbnail.qa) === null || _thumbnail$qa3 === void 0 ? void 0 : _thumbnail$qa3.caption,
    multiline: thumbnail.size === 'lg',
    layout: thumbnail.layout,
    caption: thumbnail.caption,
    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({
    ref: mergeRefs(thumbnail.inputRef, ref),
    "aria-label": "".concat(thumbnail.label, " ").concat(thumbnail.caption) || 'checkbox',
    disabled: thumbnail.disabled
  }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), {
    onKeyDown: preventSpaceOnDisabledThumbnail
  }))));
});
function PlaceholderInner(props, ref) {
  switch (props.role) {
    case 'checkbox':
      {
        return /*#__PURE__*/React.createElement(CheckboxPlaceholder, _extends({
          ref: ref
        }, props));
      }
    case 'figure':
      {
        return /*#__PURE__*/React.createElement(FigurePlaceholder, _extends({
          ref: ref
        }, props));
      }
    default:
      {
        return /*#__PURE__*/React.createElement(BasePlaceholder, _extends({
          ref: ref
        }, props));
      }
  }
}
var BaseThumbnail = /*#__PURE__*/React.forwardRef(function BaseThumbnail(props, ref) {
  var _thumbnail$filename, _thumbnail$qa4;
  var thumbnail = useThumbnail(props);
  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
    ref: ref,
    layout: thumbnail.layout,
    size: thumbnail.size
  }, props), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
    focused: thumbnail.focused,
    disabled: thumbnail.disabled,
    selected: thumbnail.selected,
    clickable: thumbnail.clickable,
    size: thumbnail.size
  }, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
    src: thumbnail.src,
    alt: thumbnail.alt
  }) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
    file: thumbnail.src,
    "aria-label": thumbnail.alt
  }), /*#__PURE__*/React.createElement(TickIcon, {
    size: thumbnail.size,
    selected: thumbnail.toggleState.isSelected
  }), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
    variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename = thumbnail.filename) !== null && _thumbnail$filename !== void 0 ? _thumbnail$filename : '')
  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
    label: thumbnail.label,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
    qa: (_thumbnail$qa4 = thumbnail.qa) === null || _thumbnail$qa4 === void 0 ? void 0 : _thumbnail$qa4.caption,
    multiline: thumbnail.size === 'lg',
    layout: thumbnail.layout,
    caption: thumbnail.caption,
    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
    disabled: thumbnail.disabled,
    error: thumbnail.error
  }));
});
var FigureThumbnail = /*#__PURE__*/React.forwardRef(function FigureThumbnail(props, ref) {
  var _thumbnail$filename2, _thumbnail$qa5;
  var thumbnail = useThumbnail(props);
  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, {
    layout: thumbnail.layout,
    size: thumbnail.size
  }, /*#__PURE__*/React.createElement(StyledImageThumbnail, {
    ref: ref,
    focused: thumbnail.focused,
    disabled: thumbnail.disabled,
    selected: thumbnail.selected,
    clickable: thumbnail.clickable,
    size: thumbnail.size,
    as: thumbnail.as
  }, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
    src: thumbnail.src,
    alt: thumbnail.alt
  }) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
    file: thumbnail.src,
    "aria-label": thumbnail.alt
  }), /*#__PURE__*/React.createElement(TickIcon, {
    size: thumbnail.size,
    selected: thumbnail.toggleState.isSelected
  }), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
    variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename2 = thumbnail.filename) !== null && _thumbnail$filename2 !== void 0 ? _thumbnail$filename2 : '')
  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(FigCaption, {
    label: thumbnail.label,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
    qa: (_thumbnail$qa5 = thumbnail.qa) === null || _thumbnail$qa5 === void 0 ? void 0 : _thumbnail$qa5.caption,
    multiline: thumbnail.size === 'lg',
    layout: thumbnail.layout,
    caption: thumbnail.caption,
    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
    disabled: thumbnail.disabled,
    error: thumbnail.error
  }));
});
var CheckboxThumbnail = /*#__PURE__*/React.forwardRef(function CheckboxThumbnail(_ref5, ref) {
  var _thumbnail$filename3, _props$qa;
  var children = _ref5.children,
    as = _ref5.as,
    label = _ref5.label,
    name = _ref5.name,
    onChange = _ref5.onChange,
    role = _ref5.role,
    value = _ref5.value,
    props_ = _objectWithoutProperties(_ref5, _excluded2);
  var props = _objectSpread(_objectSpread({}, props_), {}, {
    as: as,
    label: label,
    name: name,
    onChange: onChange,
    role: role,
    value: value,
    isDisabled: props_.disabled,
    isSelected: props_.checked,
    defaultSelected: props_.defaultChecked
  });
  var thumbnail = useThumbnail(props);
  var isInputFocused = document.activeElement === thumbnail.inputRef.current;
  var preventSpaceOnDisabledThumbnail = function preventSpaceOnDisabledThumbnail(e) {
    if (e.key === ' ' && thumbnail.disabled) {
      e.preventDefault();
    }
  };
  React.useEffect(function () {
    if (props.focused && thumbnail.inputRef.current) {
      thumbnail.inputRef.current.focus();
    }
  }, [props.focused, thumbnail.inputRef]);
  return /*#__PURE__*/React.createElement(StyledThumbnailWrapper, _extends({
    layout: thumbnail.layout,
    size: thumbnail.size
  }, props_, {
    onClick: function onClick(e) {
      if (!thumbnail.disabled) {
        var _thumbnail$onClick2;
        thumbnail.toggleState.toggle();
        (_thumbnail$onClick2 = thumbnail.onClick) === null || _thumbnail$onClick2 === void 0 ? void 0 : _thumbnail$onClick2.call(thumbnail, e);
      }
    }
  }), /*#__PURE__*/React.createElement(StyledImageThumbnail, {
    focused: thumbnail.focused || isInputFocused,
    disabled: thumbnail.disabled,
    selected: thumbnail.selected,
    clickable: thumbnail.clickable,
    size: thumbnail.size
  }, thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? /*#__PURE__*/React.createElement(StyledImageThumbnailImage, {
    src: thumbnail.src,
    alt: thumbnail.alt
  }) : /*#__PURE__*/React.createElement(ThumbnailPreview, {
    file: thumbnail.src,
    "aria-label": thumbnail.alt
  }), /*#__PURE__*/React.createElement(TickIcon, {
    size: thumbnail.size,
    selected: thumbnail.toggleState.isSelected
  }), thumbnail.shouldUsePlaceholder && /*#__PURE__*/React.createElement(StyledFileIcon, {
    variant: thumbnail.variant || getThumbnailVariantForFilename((_thumbnail$filename3 = thumbnail.filename) !== null && _thumbnail$filename3 !== void 0 ? _thumbnail$filename3 : '')
  }), thumbnail.size === 'lg' && /*#__PURE__*/React.createElement(Label, {
    label: thumbnail.label,
    disabled: thumbnail.disabled
  }), /*#__PURE__*/React.createElement(StyledImageThumbnailOverlay, null)), /*#__PURE__*/React.createElement(ThumbnailCaption, {
    qa: (_props$qa = props.qa) === null || _props$qa === void 0 ? void 0 : _props$qa.caption,
    multiline: thumbnail.size === 'lg',
    layout: thumbnail.layout,
    caption: thumbnail.caption,
    hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder,
    disabled: thumbnail.disabled,
    error: props.error
  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({
    ref: mergeRefs(thumbnail.inputRef, ref),
    type: 'checkbox',
    disabled: thumbnail.disabled
  }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), {
    onKeyDown: preventSpaceOnDisabledThumbnail
  }))));
});
function ThumbnailInner(props, ref) {
  var isFile = props.src instanceof File;
  var isImageURL = typeof props.src === 'string';
  if (!isFile && !isImageURL) {
    console.warn('Unknown Thumbnail source:', props.src);
  }
  switch (props.role) {
    case 'checkbox':
      {
        return /*#__PURE__*/React.createElement(CheckboxThumbnail, _extends({
          ref: ref
        }, props));
      }
    case 'figure':
      {
        return /*#__PURE__*/React.createElement(FigureThumbnail, _extends({
          ref: ref
        }, props));
      }
    default:
      {
        return /*#__PURE__*/React.createElement(BaseThumbnail, _extends({
          ref: ref
        }, props));
      }
  }
}

/**

 We use thumbnails to display previews for images or files as either a smaller
 version of an uploaded image, or an icon representing the file type. If an
 image preview can be generated from the file (in the case of images) then
 display that image.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-thumbnail--demo-thumbnail)

 @see [Design Guidelines](https://design.procore.com/thumbnail)

 */
var Thumbnail_ = /*#__PURE__*/React.forwardRef(ThumbnailInner);
var Placeholder = /*#__PURE__*/React.forwardRef(PlaceholderInner);

// @ts-ignore
Placeholder.displayName = 'Thumbnail.Placeholder';

// @ts-ignore
Thumbnail_.displayName = 'Thumbnail';
export var Thumbnail = addSubcomponents({
  Placeholder: Placeholder
}, Thumbnail_);
//# sourceMappingURL=Thumbnail.js.map