import styled, { css } from 'styled-components';
import { Typography } from '../Typography';
import { getTypographyIntent, typographyWeights } from '../Typography/Typography.styles';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { getEllipsis, getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
import { DocumentIcon } from './ThumbnailDocumentIcon';
var thumbnailSizeSm = 40;
var thumbnailSizeLg = 104;
var labelHeight = 24;
var labelFontSize = 12;
var tickSize = 24;
var rowLayoutCaptionWidth = 288;
var multilineCaptionMaxHeight = spacing.lg * 2;
var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;letter-spacing:0.4px;font-weight:500;", " ", " ", " ", ""], colors.gray15, function (_ref) {
  var layout = _ref.layout;
  return layout === 'row' ? "\n        align-items: center;\n        margin-left: ".concat(spacing.sm, "px;\n        width: ").concat(rowLayoutCaptionWidth, "px;\n      ") : '';
}, function (_ref2) {
  var layout = _ref2.layout;
  return layout === 'column' ? "\n        margin-top: ".concat(spacing.xs / 2, "px;\n        width: ").concat(thumbnailSizeLg, "px;\n      ") : '';
}, function (_ref3) {
  var error = _ref3.error;
  return error ? "color: ".concat(colors.red50, ";") : '';
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled ? "color: ".concat(colors.gray70, ";") : '';
});
export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultilineCaption",
  componentId: "core-11_26_1__sc-195f70c-0"
})(["", " display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledCaptionText",
  componentId: "core-11_26_1__sc-195f70c-1"
})(["width:100%;"]);
export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPlaceholderCaption",
  componentId: "core-11_26_1__sc-195f70c-2"
})(["", ""], captionBase);
export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSingleLineCaption",
  componentId: "core-11_26_1__sc-195f70c-3"
})(["display:flex;", ""], captionBase);
export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledSinglelineCaptionBody",
  componentId: "core-11_26_1__sc-195f70c-4"
})(["", ""], getEllipsis);
export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledSinglelineCaptionEnding",
  componentId: "core-11_26_1__sc-195f70c-5"
})(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
  displayName: "StyledLabelText",
  componentId: "core-11_26_1__sc-195f70c-6"
})(["", ""], getEllipsis());
export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
  displayName: "StyledThumbnailFigCaption",
  componentId: "core-11_26_1__sc-195f70c-7"
})(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
  var _ref5$$color = _ref5.$color,
    $color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
  return colors[$color];
}, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledLabel",
  componentId: "core-11_26_1__sc-195f70c-8"
})(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
  var clickable = _ref6.clickable;
  return clickable ? 'cursor: pointer;' : '';
}, function (_ref7) {
  var selected = _ref7.selected;
  return selected ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 1;\n          transform: scale(1);\n        }\n      ") : '';
}, getFocus(), function (_ref8) {
  var focused = _ref8.focused;
  return focused && getFocus();
}, function (_ref9) {
  var disabled = _ref9.disabled,
    clickable = _ref9.clickable;
  return disabled && clickable ? 'cursor: not-allowed;' : '';
}, function (_ref10) {
  var size = _ref10.size;
  var sizeInPx = "".concat(size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
  return "\n      width: ".concat(sizeInPx, ";\n      height: ").concat(sizeInPx, ";\n    ");
});
export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
  displayName: "StyledTickIcon",
  componentId: "core-11_26_1__sc-195f70c-9"
})(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref11) {
  var selected = _ref11.selected;
  return selected ? "\n        opacity: 1;\n        transform: scale(1);\n      " : '';
}, function (_ref12) {
  var size = _ref12.size;
  return size === 'sm' ? "\n        top: 50%;\n        left: 50%;\n        margin-top: ".concat(-tickSize / 2, "px;\n        margin-left: ").concat(-tickSize / 2, "px;\n      ") : '';
});
export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
  displayName: "StyledFileIcon",
  componentId: "core-11_26_1__sc-195f70c-10"
})(["width:36.5%;height:auto;"]);
export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImageThumbnailPreview",
  componentId: "core-11_26_1__sc-195f70c-11"
})(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref13) {
  var $bgImage = _ref13.$bgImage;
  return css(["background-image:url(", ");"], $bgImage);
});
export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImageThumbnailOverlay",
  componentId: "core-11_26_1__sc-195f70c-12"
})(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
  displayName: "StyledImageThumbnailImage",
  componentId: "core-11_26_1__sc-195f70c-13"
})([""]);
export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImageThumbnail",
  componentId: "core-11_26_1__sc-195f70c-14"
})(["", " flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref14) {
  var disabled = _ref14.disabled;
  return disabled ? "\n        &,\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(whiteOverlay, "\n          }\n        }\n        ").concat(StyledImageThumbnailPreview, ",\n        ").concat(StyledTickIcon, ",\n        ").concat(StyledImageThumbnailImage, " {\n          filter: saturate(0);\n        }\n        ").concat(StyledFileIcon, " {\n          filter: saturate(0);\n          z-index: -1;\n        }\n      ") : '';
}, function (_ref15) {
  var selected = _ref15.selected,
    focused = _ref15.focused,
    disabled = _ref15.disabled;
  return focused && disabled ? selected ? "\n          ".concat(StyledTickIcon, " {\n            z-index: 0;\n          }\n        ") : "\n          ".concat(StyledTickIcon, " {\n            z-index: 1;\n          }\n        ") : '';
}, function (_ref16) {
  var selected = _ref16.selected,
    focused = _ref16.focused;
  return selected && focused ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 1;\n        }\n      ") : '';
}, function (_ref17) {
  var selected = _ref17.selected,
    focused = _ref17.focused,
    disabled = _ref17.disabled;
  return selected && focused && disabled ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 0;\n        }\n      ") : '';
}, function (_ref18) {
  var focused = _ref18.focused,
    disabled = _ref18.disabled;
  return focused && !disabled ? "\n        ".concat(StyledImageThumbnailOverlay, " {\n          display: block;\n        }\n      ") : '';
}, function (_ref19) {
  var clickable = _ref19.clickable,
    disabled = _ref19.disabled;
  return clickable && !disabled ? "\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(blackOverlay, "\n          }\n        }\n      ") : '';
});
export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledThumbnailWrapper",
  componentId: "core-11_26_1__sc-195f70c-15"
})(["display:flex;", " ", ""], function (_ref20) {
  var size = _ref20.size;
  return size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
}, function (_ref21) {
  var layout = _ref21.layout;
  var isRowLayout = layout === 'row';
  return isRowLayout ? "\n        flex-direction: row;\n        aligh-items: center;\n      " : "\n        flex-direction: column;\n        aligh-items: flex-start;\n      ";
});
export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPlaceholderThumbnail",
  componentId: "core-11_26_1__sc-195f70c-16"
})(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref22) {
  var clickable = _ref22.clickable;
  return clickable ? "\n        &:hover {\n          background-color: ".concat(colors.gray96, ";\n        }\n\n      ") : '';
}, function (_ref23) {
  var selected = _ref23.selected,
    size = _ref23.size;
  return selected && size === 'sm' ? "\n        ".concat(StyledFileIcon, " {\n          display: none;\n        }\n      ") : '';
}, function (_ref24) {
  var disabled = _ref24.disabled;
  return disabled ? "\n        ".concat(StyledFileIcon, ",\n        ").concat(StyledTickIcon, " {\n          filter: saturate(0);\n          opacity: 0.5;\n        }\n\n        &:hover {\n          background-color: inherit;\n        }\n      ") : '';
}, function (_ref25) {
  var disabled = _ref25.disabled,
    selected = _ref25.selected;
  return disabled && !selected ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 0;\n          transform: scale(0.75);\n        }\n      ") : '';
});
//# sourceMappingURL=Thumbnail.styles.js.map