import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { styled, withTheme } from '@storybook/theming';
import { getBorderColor, themeBorderColors } from './ImagesView';
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 Input = 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 = styled.div({
  position: 'absolute',
  width: '100%',
  height: '100%',
  overflow: 'hidden'
});
const ImageWrapper = withTheme(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 = styled.img(_ref2 => {
  let {
    borderColor
  } = _ref2;
  return {
    boxSizing: 'border-box',
    border: `1px solid ${borderColor}`,
    maxWidth: '100%'
  };
});
const Image = styled(BaseImage)({
  position: 'absolute'
});
const DiffImage = styled(BaseImage)({
  opacity: '0'
});
export const SlideView = withTheme(_ref3 => {
  let {
    actual,
    diff,
    expect,
    theme
  } = _ref3;
  const [step, setStep] = useState(0);
  const expectedImageContainerRef = useRef(null);
  const expectedImageWrapperRef = useRef(null);
  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);
  useApplyScale(actualImageRef, scale);
  const handleSlide = 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}%`;
  }, []);
  useLayoutEffect(() => {
    if (loaded && diffImageRef.current) setStep(100 / diffImageRef.current.getBoundingClientRect().width);
  }, [loaded, scale]);
  useLayoutEffect(() => {
    if (loaded && expectedImageContainerRef.current && expectedImageWrapperRef.current) {
      expectedImageContainerRef.current.style.right = '100%';
      expectedImageWrapperRef.current.style.left = '100%';
    }
  }, [loaded]);
  useEffect(() => {
    if (loaded) readyForCapture();
  }, [loaded]);
  return loaded ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
    "data-testid": "slider",
    type: "range",
    min: 0,
    max: 100,
    defaultValue: 0,
    step: step,
    onChange: handleSlide
  }), /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Image, {
    ref: actualImageRef,
    borderColor: getBorderColor(theme, themeBorderColors.actual),
    alt: "actual",
    src: actual
  }))), /*#__PURE__*/React.createElement(ImageContainer, {
    ref: expectedImageContainerRef
  }, /*#__PURE__*/React.createElement(ImageWrapper, {
    ref: expectedImageWrapperRef
  }, /*#__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(Loader, {
    size: 64
  });
});