"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideBySideView = 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({
  display: 'flex',
  flexWrap: 'nowrap',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  width: '100%'
});
const ImagesLayout = _theming.styled.div(_ref => {
  let {
    layout
  } = _ref;
  return {
    display: 'flex',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: layout == 'horizontal' ? 'row' : 'column',
    '& > :not(:first-of-type)': {
      marginLeft: layout == 'horizontal' ? '20px' : 0,
      marginTop: layout == 'horizontal' ? 0 : '20px'
    }
  };
});
const ImageLink = _theming.styled.a({
  lineHeight: 0,
  flexShrink: 0
});
const ImageDiffLink = _theming.styled.a({
  lineHeight: 0
});
const Image = _theming.styled.img(_ref2 => {
  let {
    borderColor
  } = _ref2;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%',
    flexShrink: 0
  };
});
const DiffImage = (0, _theming.styled)(Image)({
  flexShrink: 1
});
const SideBySideView = exports.SideBySideView = (0, _theming.withTheme)(_ref3 => {
  let {
    actual,
    diff,
    expect,
    theme
  } = _ref3;
  const [layout, setLayout] = (0, _react.useState)('horizontal');
  const [scale, setScale] = (0, _react.useState)(1);
  const containerRef = (0, _react.useRef)(null);
  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 calcScale = (0, _react.useCallback)(() => {
    const containerElement = containerRef.current;
    const expectImage = expectImageRef.current;
    const diffImage = diffImageRef.current;
    const actualImage = actualImageRef.current;
    if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) return setScale(1);
    const borderSize = (0, _helpers.getBorderSize)(diffImage);
    if (layout == 'vertical') {
      const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
      setScale(Math.min(1, ratio));
    }
    if (layout == 'horizontal') {
      const ratio =
      // NOTE: 40px because we have two margins by 20px and 6px for borders
      (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(image => image.naturalWidth).reduce((a, b) => a + b, 0);
      setScale(Math.min(1, ratio));
    }
  }, [loaded, layout]);
  (0, _helpers.useResizeObserver)(containerRef, calcScale);
  (0, _react.useLayoutEffect)(calcScale, [calcScale]);
  (0, _react.useLayoutEffect)(() => {
    // TODO Check image height and viewport
    const diffImage = diffImageRef.current;
    if (!diffImage || !loaded) return;
    const ratio = diffImage.naturalWidth / diffImage.naturalHeight;
    setLayout(ratio >= 2 ? 'vertical' : 'horizontal');
  }, [loaded]);
  (0, _helpers.useApplyScale)(expectImageRef, scale);
  (0, _helpers.useApplyScale)(actualImageRef, scale);
  (0, _react.useEffect)(() => {
    if (loaded) (0, _readyForCapture.readyForCapture)();
  }, [loaded]);
  return /*#__PURE__*/_react.default.createElement(Container, {
    ref: containerRef
  }, loaded ? /*#__PURE__*/_react.default.createElement(ImagesLayout, {
    layout: layout
  }, /*#__PURE__*/_react.default.createElement(ImageLink, {
    href: expect,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/_react.default.createElement(Image, {
    ref: expectImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
    alt: "expect",
    src: expect
  })), /*#__PURE__*/_react.default.createElement(ImageDiffLink, {
    href: diff,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/_react.default.createElement(DiffImage, {
    ref: diffImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.diff),
    alt: "diff",
    src: diff
  })), /*#__PURE__*/_react.default.createElement(ImageLink, {
    href: actual,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/_react.default.createElement(Image, {
    ref: actualImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
    alt: "actual",
    src: actual
  }))) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
    size: 64
  }));
});