import styled, { css } from 'styled-components';
import { getTypographyIntent, Typography, typographyWeights } from '../Typography';
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' && css(["align-items:center;margin-left:", "px;width:", "px;"], spacing.sm, rowLayoutCaptionWidth);
}, function (_ref2) {
  var $layout = _ref2.$layout;
  return $layout === 'column' && css(["margin-top:", "px;width:", "px;"], spacing.xs / 2, thumbnailSizeLg);
}, function (_ref3) {
  var $error = _ref3.$error;
  return $error && css(["color:", ";"], colors.red50);
}, function (_ref4) {
  var $disabled = _ref4.$disabled;
  return $disabled && css(["color:", ";"], colors.gray70);
});
export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultilineCaption",
  componentId: "core-12_34_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-12_34_1__sc-195f70c-1"
})(["width:100%;"]);
export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPlaceholderCaption",
  componentId: "core-12_34_1__sc-195f70c-2"
})(["", ""], captionBase);
export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSingleLineCaption",
  componentId: "core-12_34_1__sc-195f70c-3"
})(["display:flex;", ""], captionBase);
export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledSinglelineCaptionBody",
  componentId: "core-12_34_1__sc-195f70c-4"
})(["", ""], getEllipsis);
export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledSinglelineCaptionEnding",
  componentId: "core-12_34_1__sc-195f70c-5"
})(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
  displayName: "StyledLabelText",
  componentId: "core-12_34_1__sc-195f70c-6"
})(["", ""], getEllipsis());
export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
  displayName: "StyledThumbnailFigCaption",
  componentId: "core-12_34_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-12_34_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 && css(["cursor:pointer;"]);
}, function (_ref7) {
  var $selected = _ref7.$selected;
  return $selected && css(["", "{opacity:1;transform:scale(1);}"], StyledTickIcon);
}, getFocus(), function (_ref8) {
  var $focused = _ref8.$focused;
  return $focused && getFocus();
}, function (_ref9) {
  var $disabled = _ref9.$disabled,
    $clickable = _ref9.$clickable;
  return $disabled && $clickable && css(["cursor:not-allowed;"]);
}, function (_ref0) {
  var $size = _ref0.$size;
  var sizeInPx = "".concat($size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
  return css(["width:", ";height:", ";"], sizeInPx, sizeInPx);
});
export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
  displayName: "StyledTickIcon",
  componentId: "core-12_34_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 (_ref1) {
  var $selected = _ref1.$selected;
  return $selected && css(["opacity:1;transform:scale(1);"]);
}, function (_ref10) {
  var $size = _ref10.$size;
  return $size === 'sm' && css(["top:50%;left:50%;margin-top:", "px;margin-left:", "px;"], -tickSize / 2, -tickSize / 2);
});
export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
  displayName: "StyledFileIcon",
  componentId: "core-12_34_1__sc-195f70c-10"
})(["width:36.5%;height:auto;"]);
export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImageThumbnailPreview",
  componentId: "core-12_34_1__sc-195f70c-11"
})(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
  var $bgImage = _ref11.$bgImage;
  return css(["background-image:url(", ");"], $bgImage);
});
export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImageThumbnailOverlay",
  componentId: "core-12_34_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-12_34_1__sc-195f70c-13"
})([""]);
export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledImageThumbnail",
  componentId: "core-12_34_1__sc-195f70c-14"
})(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
  var $disabled = _ref12.$disabled;
  return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
}, function (_ref13) {
  var $selected = _ref13.$selected,
    $focused = _ref13.$focused,
    $disabled = _ref13.$disabled;
  return $focused && $disabled && css(["", "{z-index:", ";}"], StyledTickIcon, $selected ? 0 : 1);
}, function (_ref14) {
  var $selected = _ref14.$selected,
    $focused = _ref14.$focused;
  return $selected && $focused && css(["", "{z-index:1;}"], StyledTickIcon);
}, function (_ref15) {
  var $selected = _ref15.$selected,
    $focused = _ref15.$focused,
    $disabled = _ref15.$disabled;
  return $selected && $focused && $disabled && css(["", "{z-index:0;}"], StyledTickIcon);
}, function (_ref16) {
  var $focused = _ref16.$focused,
    $disabled = _ref16.$disabled;
  return $focused && !$disabled && css(["", "{display:block;}"], StyledImageThumbnailOverlay);
}, function (_ref17) {
  var $clickable = _ref17.$clickable,
    $disabled = _ref17.$disabled;
  return $clickable && !$disabled && css(["&:hover{", "{display:block;", "}}"], StyledImageThumbnailOverlay, blackOverlay);
});
export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledThumbnailWrapper",
  componentId: "core-12_34_1__sc-195f70c-15"
})(["display:flex;", " ", ""], function (_ref18) {
  var $size = _ref18.$size;
  return $size === 'lg' ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ") : '';
}, function (_ref19) {
  var $layout = _ref19.$layout;
  var isRowLayout = $layout === 'row';
  return isRowLayout ? css(["flex-direction:row;align-items:center;"]) : css(["flex-direction:column;align-items:flex-start;"]);
});
export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledPlaceholderThumbnail",
  componentId: "core-12_34_1__sc-195f70c-16"
})(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
  var $clickable = _ref20.$clickable;
  return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);
}, function (_ref21) {
  var $selected = _ref21.$selected,
    $size = _ref21.$size;
  return $selected && $size === 'sm' && css(["", "{display:none;}"], StyledFileIcon);
}, function (_ref22) {
  var $disabled = _ref22.$disabled;
  return $disabled && css(["", ",", "{filter:saturate(0);opacity:0.5;}&:hover{background-color:inherit;}"], StyledFileIcon, StyledTickIcon);
}, function (_ref23) {
  var $disabled = _ref23.$disabled,
    $selected = _ref23.$selected;
  return $disabled && !$selected && css(["", "{opacity:0;transform:scale(0.75);}"], StyledTickIcon);
});
//# sourceMappingURL=Thumbnail.styles.js.map