import React from 'react';
import { SideBySideView } from './SideBySideView';
import { SwapView } from './SwapView';
import { SlideView } from './SlideView';
import { BlendView } from './BlendView';
import { styled, withTheme } from '@storybook/theming';
export const themeBorderColors = {
  actual: 'negative',
  expect: 'positive',
  diff: 'secondary'
};
const isColor = (theme, color) => color in theme.color;
export function getBorderColor(theme, color) {
  return isColor(theme, color) ? theme.color[color] : color;
}
const views = {
  'side-by-side': SideBySideView,
  swap: SwapView,
  slide: SlideView,
  blend: BlendView
};
const Container = styled.div({
  height: '100%',
  display: 'flex',
  textAlign: 'center',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '0 20px'
});
const ImageLink = styled.a({
  lineHeight: 0
});
const ActualImage = withTheme(styled.img(_ref => {
  let {
    theme
  } = _ref;
  return {
    border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
    maxWidth: '100%'
  };
}));
export function ImagesView(_ref2) {
  let {
    url,
    image,
    canApprove,
    mode
  } = _ref2;
  const ViewComponent = views[mode];
  const {
    actual,
    diff,
    expect
  } = image;
  return /*#__PURE__*/React.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/React.createElement(ViewComponent, {
    actual: `${url}/${actual}`,
    diff: `${url}/${diff}`,
    expect: `${url}/${expect}`
  }) : /*#__PURE__*/React.createElement(ImageLink, {
    href: `${url}/${actual}`,
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/React.createElement(ActualImage, {
    alt: "actual",
    src: `${url}/${actual}`
  })));
}