import React, { useEffect, useRef } from 'react';
import { getBorderColor, themeBorderColors } from './ImagesView';
import { styled, withTheme } from '@storybook/theming';
import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers';
import { readyForCapture } from '../../../addon/readyForCapture';
const Container = styled.div({
  position: 'relative',
  display: 'flex',
  filter: 'invert(100%)'
});
const ImageContainer = styled.div({
  position: 'absolute',
  width: '100%',
  height: '100%',
  display: 'flex'
});
const Image = styled.img(_ref => {
  let {
    borderColor
  } = _ref;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%',
    filter: 'invert(100%)'
  };
});
const ActualImage = styled(Image)({
  mixBlendMode: 'difference'
});
const DiffImage = styled(Image)({
  opacity: '0'
});
export const BlendView = withTheme(_ref2 => {
  let {
    actual,
    diff,
    expect,
    theme
  } = _ref2;
  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, loaded);
  useApplyScale(actualImageRef, scale, loaded);
  useEffect(() => {
    if (loaded) readyForCapture();
  }, [loaded]);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(Image, {
    ref: expectImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.expect),
    alt: "expect",
    src: expect
  })), /*#__PURE__*/React.createElement(DiffImage, {
    ref: diffImageRef,
    borderColor: 'transparent',
    alt: "diff",
    src: diff
  }), /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(ActualImage, {
    ref: actualImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.actual),
    alt: "actual",
    src: actual
  })));
});