"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SwapView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ImagesView = require("./ImagesView");
var _theming = require("@storybook/theming");
var _helpers = require("../../helpers");
var _components = require("@storybook/components");
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'
});
const BaseImage = _theming.styled.img(_ref => {
  let {
    borderColor
  } = _ref;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%'
  };
});
const Image = (0, _theming.styled)(BaseImage)({
  position: 'absolute'
});
const DiffImage = (0, _theming.styled)(BaseImage)({
  cursor: 'pointer',
  outline: 'none',
  opacity: 0,
  zIndex: 1
});
const SwapView = exports.SwapView = (0, _theming.withTheme)(_ref2 => {
  let {
    theme,
    expect,
    actual,
    diff
  } = _ref2;
  const [image, setImage] = (0, _react.useState)('actual');
  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, image);
  (0, _helpers.useApplyScale)(actualImageRef, scale, image);
  const handleChangeView = (0, _react.useCallback)(() => setImage(prevImage => prevImage == 'actual' ? 'expect' : 'actual'), []);
  (0, _react.useEffect)(() => {
    if (loaded) (0, _readyForCapture.readyForCapture)();
  }, [loaded]);
  return loaded ? /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Image, {
    ref: expectImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
    alt: 'expect',
    src: expect,
    hidden: image != 'expect'
  }), /*#__PURE__*/_react.default.createElement(DiffImage, {
    ref: diffImageRef,
    borderColor: 'transparent',
    tabIndex: 0,
    alt: "diff",
    src: diff,
    onClick: handleChangeView
  }), /*#__PURE__*/_react.default.createElement(Image, {
    ref: actualImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
    alt: 'actual',
    src: actual,
    hidden: image != 'actual'
  })) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
    size: 64
  });
});