var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { ThumbnailPreview } from './ThumbnailPreview';
import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledPlaceholderThumbnail, StyledThumbnailWrapper, StyledTickIcon, StyledLabelText, } from './Thumbnail.styles';
import { getIsFilePreviewableAsImage, getVariantForFilename, } from './Thumbnail.utils';
import { ThumbnailCaption } from './ThumbnailCaption';
var defaultSize = 'lg';
function TickIcon(_a) {
    var size = _a.size, selected = _a.selected;
    return (React.createElement(StyledTickIcon
    // in IE11, all svg element are focusable by default
    , { 
        // 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" },
        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" }),
        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%)" }),
        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 Label(_a) {
    var label = _a.label, disabled = _a.disabled;
    return label ? (React.createElement(StyledLabel, null,
        React.createElement(StyledLabelText, { color: disabled ? 'gray70' : 'gray15', intent: "small", weight: "bold" }, label))) : null;
}
/**

 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://procore.github.io/core/latest/?path=/story/demos-thumbnail--demo-thumbnail)

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

 */
var Thumbnail_ = React.forwardRef(function Thumbnail(_a, ref) {
    var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultSize : _b, _c = _a.focused, focused = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.selected, selected = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.clickable, clickable = _g === void 0 ? true : _g, _h = _a.caption, caption = _h === void 0 ? '' : _h, _j = _a.label, label = _j === void 0 ? '' : _j, _k = _a.hasCaptionPlaceholder, hasCaptionPlaceholder = _k === void 0 ? false : _k, className = _a.className, qa = _a.qa, props = __rest(_a, ["src", "size", "focused", "error", "selected", "disabled", "clickable", "caption", "label", "hasCaptionPlaceholder", "className", "qa"]);
    var layout = size === 'sm' ? 'row' : 'column';
    var isFile = src instanceof File;
    var canPreviewFileAsImage = getIsFilePreviewableAsImage(src);
    var isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage;
    var shouldUsePlaceholder = isFileOrNonPreviewableImage || !src;
    if (shouldUsePlaceholder) {
        var filename = isFileOrNonPreviewableImage ? src.name : caption;
        return (React.createElement(Placeholder, __assign({ ref: ref, filename: filename, size: size, focused: focused, selected: selected, disabled: disabled, error: error, clickable: clickable, caption: caption, hasCaptionPlaceholder: hasCaptionPlaceholder, label: label, className: className, qa: qa }, props)));
    }
    var isImageURL = typeof src === 'string';
    if (!isFile && !isImageURL) {
        console.warn('Unknown Thumbnail source:', src);
        return null;
    }
    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: layout, size: size }, props),
        React.createElement(StyledImageThumbnail, { focused: focused, disabled: disabled, selected: selected, clickable: clickable, size: size },
            isImageURL ? (React.createElement(StyledImageThumbnailImage, { src: src })) : (React.createElement(ThumbnailPreview, { file: src })),
            React.createElement(TickIcon, { size: size, selected: selected }),
            React.createElement(StyledImageThumbnailOverlay, null),
            size === 'lg' && React.createElement(Label, { label: label, disabled: disabled })),
        React.createElement(ThumbnailCaption, { qa: qa === null || qa === void 0 ? void 0 : qa.caption, multiline: size === 'lg', layout: layout, caption: caption, hasCaptionPlaceholder: hasCaptionPlaceholder, disabled: disabled, error: error })));
});
var Placeholder = React.forwardRef(function Placeholder(_a, ref) {
    var _b = _a.filename, filename = _b === void 0 ? '' : _b, _c = _a.caption, caption = _c === void 0 ? '' : _c, _d = _a.label, label = _d === void 0 ? '' : _d, variant = _a.variant, _e = _a.size, size = _e === void 0 ? 'lg' : _e, _f = _a.focused, focused = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.selected, selected = _j === void 0 ? false : _j, _k = _a.clickable, clickable = _k === void 0 ? true : _k, _l = _a.hasCaptionPlaceholder, hasCaptionPlaceholder = _l === void 0 ? false : _l, qa = _a.qa, props = __rest(_a, ["filename", "caption", "label", "variant", "size", "focused", "disabled", "error", "selected", "clickable", "hasCaptionPlaceholder", "qa"]);
    var layout = size === 'sm' ? 'row' : 'column';
    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: layout, size: size }, props),
        React.createElement(StyledPlaceholderThumbnail, { focused: focused, disabled: disabled, selected: selected, clickable: clickable, size: size },
            React.createElement(TickIcon, { size: size, selected: selected }),
            React.createElement(StyledFileIcon, { variant: variant || getVariantForFilename(filename) }),
            size === 'lg' && React.createElement(Label, { label: label, disabled: disabled })),
        React.createElement(ThumbnailCaption, { error: error, qa: qa === null || qa === void 0 ? void 0 : qa.caption, multiline: size === 'lg', layout: layout, caption: caption, hasCaptionPlaceholder: hasCaptionPlaceholder, disabled: disabled })));
});
Placeholder.displayName = 'Thumbnail.Placeholder';
Thumbnail_.displayName = 'Thumbnail';
export var Thumbnail = addSubcomponents({ Placeholder: Placeholder }, Thumbnail_);
//# sourceMappingURL=Thumbnail.js.map