"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlendView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ImagesView = require("./ImagesView");
var _theming = require("@storybook/theming");
var _helpers = require("../../helpers");
var _readyForCapture = require("../../../addon/readyForCapture");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Container = _theming.styled.div({
  position: 'relative',
  display: 'flex',
  filter: 'invert(100%)'
});
const ImageContainer = _theming.styled.div({
  position: 'absolute',
  width: '100%',
  height: '100%',
  display: 'flex'
});
const Image = _theming.styled.img(_ref => {
  let {
    borderColor
  } = _ref;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%',
    filter: 'invert(100%)'
  };
});
const ActualImage = (0, _theming.styled)(Image)({
  mixBlendMode: 'difference'
});
const DiffImage = (0, _theming.styled)(Image)({
  opacity: '0'
});
const BlendView = exports.BlendView = (0, _theming.withTheme)(_ref2 => {
  let {
    actual,
    diff,
    expect,
    theme
  } = _ref2;
  const expectImageRef = (0, _react.useRef)(null);
  const diffImageRef = (0, _react.useRef)(null);
  const actualImageRef = (0, _react.useRef)(null);
  const loaded = (0, _helpers.useLoadImages)(expect, diff, actual);
  const scale = (0, _helpers.useCalcScale)(diffImageRef, loaded);
  (0, _helpers.useApplyScale)(expectImageRef, scale, loaded);
  (0, _helpers.useApplyScale)(actualImageRef, scale, loaded);
  (0, _react.useEffect)(() => {
    if (loaded) (0, _readyForCapture.readyForCapture)();
  }, [loaded]);
  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
    ref: expectImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
    alt: "expect",
    src: expect
  })), /*#__PURE__*/_react.default.createElement(DiffImage, {
    ref: diffImageRef,
    borderColor: 'transparent',
    alt: "diff",
    src: diff
  }), /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(ActualImage, {
    ref: actualImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
    alt: "actual",
    src: actual
  })));
});