"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImagePreview = void 0;
var _react = _interopRequireDefault(require("react"));
var _theming = require("@storybook/theming");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const IMG_SIZE = 64;
const DIAG_LENGTH = (2 * (IMG_SIZE - 8) ** 2) ** (1 / 2);
const Button = _theming.styled.button(_ref => {
  let {
    borderColor
  } = _ref;
  return {
    appearance: 'none',
    background: 'none',
    color: 'inherit',
    font: 'inherit',
    cursor: 'pointer',
    outline: 'none',
    zIndex: 1,
    margin: '0 10px',
    border: '2px solid transparent',
    borderColor: borderColor || 'transparent',
    '&:first-of-type': {
      marginLeft: 0
    }
  };
});
const Image = (0, _theming.withTheme)(_theming.styled.img(_ref2 => {
  let {
    hasBorder,
    backgroundColor,
    theme
  } = _ref2;
  return {
    maxHeight: `${IMG_SIZE}px`,
    width: `${IMG_SIZE}px`,
    overflow: 'hidden',
    transform: hasBorder ? 'translateY(2px)' : undefined,
    '&::before': {
      content: "' '",
      display: 'block',
      height: `${IMG_SIZE - 8}px`,
      width: `${IMG_SIZE - 8}px`,
      margin: '4px',
      backgroundColor: backgroundColor,
      backgroundImage: `linear-gradient(
      45deg,
      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 - 0.5}px,
      ${theme.color.medium} ${DIAG_LENGTH / 2 - 0.5}px,
      ${theme.color.medium} ${DIAG_LENGTH / 2 + 0.5}px,
      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 0.5}px
    ),
    linear-gradient(
      315deg,
      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 0.2}px,
      ${theme.color.medium} ${DIAG_LENGTH / 2 + 0.2}px,
      ${theme.color.medium} ${DIAG_LENGTH / 2 + 1.2}px,
      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 1.2}px
    )`
    }
  };
}));
const ImagePreview = exports.ImagePreview = (0, _theming.withTheme)(_ref3 => {
  let {
    isActive,
    onClick,
    imageName,
    url,
    theme,
    error
  } = _ref3;
  const handleClick = () => onClick(imageName);
  return /*#__PURE__*/_react.default.createElement(Button, {
    onClick: handleClick,
    borderColor: isActive ? theme.barSelectedColor : error ? theme.color.negative : undefined
  }, /*#__PURE__*/_react.default.createElement(Image, {
    hasBorder: isActive || error,
    src: url,
    alt: imageName,
    backgroundColor: theme.background.content
  }));
});