"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SlideView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _theming = require("@storybook/theming");
var _ImagesView = require("./ImagesView");
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 Input = _theming.styled.input({
  position: 'absolute',
  cursor: 'ew-resize',
  appearance: 'none',
  background: 'none',
  boxShadow: 'none',
  outline: 'none',
  height: '100%',
  width: '100%',
  margin: '0',
  zIndex: 1,
  '&::-webkit-slider-runnable-track': {
    height: '100%'
  },
  '&::-webkit-slider-thumb': {
    boxShadow: '0 0 0 0.5px #888',
    height: '100%',
    width: '0px',
    appearance: 'none'
  },
  '&::-moz-focus-outer': {
    border: '0'
  },
  '&::-moz-range-track': {
    height: '0'
  },
  '&::-moz-range-thumb': {
    border: 'none',
    boxShadow: '0 0 0 0.5px #888',
    height: '100%',
    width: '0px'
  }
});
const ImageContainer = _theming.styled.div({
  position: 'absolute',
  width: '100%',
  height: '100%',
  overflow: 'hidden'
});
const ImageWrapper = (0, _theming.withTheme)(_theming.styled.div(_ref => {
  let {
    theme
  } = _ref;
  return {
    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
    position: 'relative',
    width: '100%',
    height: '100%',
    display: 'flex'
  };
}));
const BaseImage = _theming.styled.img(_ref2 => {
  let {
    borderColor
  } = _ref2;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%'
  };
});
const Image = (0, _theming.styled)(BaseImage)({
  position: 'absolute'
});
const DiffImage = (0, _theming.styled)(BaseImage)({
  opacity: '0'
});
const SlideView = exports.SlideView = (0, _theming.withTheme)(_ref3 => {
  let {
    actual,
    diff,
    expect,
    theme
  } = _ref3;
  const [step, setStep] = (0, _react.useState)(0);
  const expectedImageContainerRef = (0, _react.useRef)(null);
  const expectedImageWrapperRef = (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 scale = (0, _helpers.useCalcScale)(diffImageRef, loaded);
  (0, _helpers.useApplyScale)(expectImageRef, scale);
  (0, _helpers.useApplyScale)(actualImageRef, scale);
  const handleSlide = (0, _react.useCallback)(event => {
    if (!expectedImageContainerRef.current || !expectedImageWrapperRef.current) return;
    const offset = Number(event.target.value);
    expectedImageContainerRef.current.style.right = `${100 - offset}%`;
    expectedImageWrapperRef.current.style.left = `${100 - offset}%`;
  }, []);
  (0, _react.useLayoutEffect)(() => {
    if (loaded && diffImageRef.current) setStep(100 / diffImageRef.current.getBoundingClientRect().width);
  }, [loaded, scale]);
  (0, _react.useLayoutEffect)(() => {
    if (loaded && expectedImageContainerRef.current && expectedImageWrapperRef.current) {
      expectedImageContainerRef.current.style.right = '100%';
      expectedImageWrapperRef.current.style.left = '100%';
    }
  }, [loaded]);
  (0, _react.useEffect)(() => {
    if (loaded) (0, _readyForCapture.readyForCapture)();
  }, [loaded]);
  return loaded ? /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Input, {
    "data-testid": "slider",
    type: "range",
    min: 0,
    max: 100,
    defaultValue: 0,
    step: step,
    onChange: handleSlide
  }), /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(ImageWrapper, null, /*#__PURE__*/_react.default.createElement(Image, {
    ref: actualImageRef,
    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
    alt: "actual",
    src: actual
  }))), /*#__PURE__*/_react.default.createElement(ImageContainer, {
    ref: expectedImageContainerRef
  }, /*#__PURE__*/_react.default.createElement(ImageWrapper, {
    ref: expectedImageWrapperRef
  }, /*#__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(_components.Loader, {
    size: 64
  });
});