"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImagesView = ImagesView;
exports.getBorderColor = getBorderColor;
exports.themeBorderColors = void 0;
var _react = _interopRequireDefault(require("react"));
var _SideBySideView = require("./SideBySideView");
var _SwapView = require("./SwapView");
var _SlideView = require("./SlideView");
var _BlendView = require("./BlendView");
var _theming = require("@storybook/theming");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const themeBorderColors = exports.themeBorderColors = {
  actual: 'negative',
  expect: 'positive',
  diff: 'secondary'
};
const isColor = (theme, color) => color in theme.color;
function getBorderColor(theme, color) {
  return isColor(theme, color) ? theme.color[color] : color;
}
const views = {
  'side-by-side': _SideBySideView.SideBySideView,
  swap: _SwapView.SwapView,
  slide: _SlideView.SlideView,
  blend: _BlendView.BlendView
};
const Container = _theming.styled.div({
  height: '100%',
  display: 'flex',
  textAlign: 'center',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '0 20px'
});
const ImageLink = _theming.styled.a({
  lineHeight: 0
});
const ActualImage = (0, _theming.withTheme)(_theming.styled.img(_ref => {
  let {
    theme
  } = _ref;
  return {
    border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
    maxWidth: '100%'
  };
}));
function ImagesView(_ref2) {
  let {
    url,
    image,
    canApprove,
    mode
  } = _ref2;
  const ViewComponent = views[mode];
  const {
    actual,
    diff,
    expect
  } = image;
  return /*#__PURE__*/_react.default.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/_react.default.createElement(ViewComponent, {
    actual: `${url}/${actual}`,
    diff: `${url}/${diff}`,
    expect: `${url}/${expect}`
  }) : /*#__PURE__*/_react.default.createElement(ImageLink, {
    href: `${url}/${actual}`,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/_react.default.createElement(ActualImage, {
    alt: "actual",
    src: `${url}/${actual}`
  })));
}