import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { getBorderColor, themeBorderColors } from './ImagesView';
import { styled, withTheme } from '@storybook/theming';
import { useApplyScale, useLoadImages, useResizeObserver, getBorderSize } from '../../helpers';
import { Loader } from '@storybook/components';
import { readyForCapture } from '../../../addon/readyForCapture';
const Container = styled.div({
  display: 'flex',
  flexWrap: 'nowrap',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  width: '100%'
});
const ImagesLayout = 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 = styled.a({
  lineHeight: 0,
  flexShrink: 0
});
const ImageDiffLink = styled.a({
  lineHeight: 0
});
const Image = styled.img(_ref2 => {
  let {
    borderColor
  } = _ref2;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%',
    flexShrink: 0
  };
});
const DiffImage = styled(Image)({
  flexShrink: 1
});
export const SideBySideView = withTheme(_ref3 => {
  let {
    actual,
    diff,
    expect,
    theme
  } = _ref3;
  const [layout, setLayout] = useState('horizontal');
  const [scale, setScale] = useState(1);
  const containerRef = useRef(null);
  const expectImageRef = useRef(null);
  const diffImageRef = useRef(null);
  const actualImageRef = useRef(null);
  const loaded = useLoadImages(expect, diff, actual);
  const calcScale = 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 = 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]);
  useResizeObserver(containerRef, calcScale);
  useLayoutEffect(calcScale, [calcScale]);
  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]);
  useApplyScale(expectImageRef, scale);
  useApplyScale(actualImageRef, scale);
  useEffect(() => {
    if (loaded) readyForCapture();
  }, [loaded]);
  return /*#__PURE__*/React.createElement(Container, {
    ref: containerRef
  }, loaded ? /*#__PURE__*/React.createElement(ImagesLayout, {
    layout: layout
  }, /*#__PURE__*/React.createElement(ImageLink, {
    href: expect,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/React.createElement(Image, {
    ref: expectImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.expect),
    alt: "expect",
    src: expect
  })), /*#__PURE__*/React.createElement(ImageDiffLink, {
    href: diff,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/React.createElement(DiffImage, {
    ref: diffImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.diff),
    alt: "diff",
    src: diff
  })), /*#__PURE__*/React.createElement(ImageLink, {
    href: actual,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/React.createElement(Image, {
    ref: actualImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.actual),
    alt: "actual",
    src: actual
  }))) : /*#__PURE__*/React.createElement(Loader, {
    size: 64
  }));
});