import React, { useCallback, useEffect, useRef, useState } from 'react';
import { getBorderColor, themeBorderColors } from './ImagesView';
import { styled, withTheme } from '@storybook/theming';
import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers';
import { Loader } from '@storybook/components';
import { readyForCapture } from '../../../addon/readyForCapture';
const Container = styled.div({
  position: 'relative',
  display: 'flex'
});
const BaseImage = styled.img(_ref => {
  let {
    borderColor
  } = _ref;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%'
  };
});
const Image = styled(BaseImage)({
  position: 'absolute'
});
const DiffImage = styled(BaseImage)({
  cursor: 'pointer',
  outline: 'none',
  opacity: 0,
  zIndex: 1
});
export const SwapView = withTheme(_ref2 => {
  let {
    theme,
    expect,
    actual,
    diff
  } = _ref2;
  const [image, setImage] = useState('actual');
  const expectImageRef = useRef(null);
  const diffImageRef = useRef(null);
  const actualImageRef = useRef(null);
  const loaded = useLoadImages(expect, diff, actual);
  const scale = useCalcScale(diffImageRef, loaded);
  useApplyScale(expectImageRef, scale, image);
  useApplyScale(actualImageRef, scale, image);
  const handleChangeView = useCallback(() => setImage(prevImage => prevImage == 'actual' ? 'expect' : 'actual'), []);
  useEffect(() => {
    if (loaded) readyForCapture();
  }, [loaded]);
  return loaded ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Image, {
    ref: expectImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.expect),
    alt: 'expect',
    src: expect,
    hidden: image != 'expect'
  }), /*#__PURE__*/React.createElement(DiffImage, {
    ref: diffImageRef,
    borderColor: 'transparent',
    tabIndex: 0,
    alt: "diff",
    src: diff,
    onClick: handleChangeView
  }), /*#__PURE__*/React.createElement(Image, {
    ref: actualImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.actual),
    alt: 'actual',
    src: actual,
    hidden: image != 'actual'
  })) : /*#__PURE__*/React.createElement(Loader, {
    size: 64
  });
});