"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ResultsPage = void 0;
exports.ResultsPageInternal = ResultsPageInternal;
var _react = _interopRequireWildcard(require("react"));
var _ImagesView = require("./ImagesView/ImagesView");
var _PageHeader = require("./PageHeader/PageHeader");
var _PageFooter = require("./PageFooter/PageFooter");
var _helpers = require("../helpers");
var _theming = require("@storybook/theming");
var _components = require("@storybook/components");
var _viewMode = require("../viewMode");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Wrapper = _theming.styled.div({
  width: '100%',
  height: '100%',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column'
});
const ImagesViewContainer = _theming.styled.div(_ref => {
  let {
    theme
  } = _ref;
  return {
    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
    flexGrow: 1,
    padding: '20px 0'
  };
});
const HeaderContainer = _theming.styled.div({
  position: 'sticky',
  top: 0,
  zIndex: 1
});
const BodyContainer = _theming.styled.div({
  flexGrow: 1,
  minHeight: 0
});
const FooterContainer = _theming.styled.div({
  position: 'sticky',
  bottom: 0,
  zIndex: 1
});
const Container = _theming.styled.div(_ref2 => {
  let {
    height = '100vh'
  } = _ref2;
  return {
    height,
    width: '100%',
    overflowY: 'hidden',
    display: 'flex',
    flexDirection: 'column'
  };
});
function ResultsPageInternal(_ref3) {
  let {
    id,
    path,
    results = [],
    approved = {},
    theme,
    onImageApprove,
    showTitle = false,
    height
  } = _ref3;
  const [retry, setRetry] = (0, _react.useState)(results.length);
  const result = results[retry - 1] ?? {};
  const [imageName, setImageName] = (0, _react.useState)(Object.keys(result.images ?? {})[0] ?? '');
  const [viewMode, setViewMode] = (0, _react.useState)((0, _viewMode.getViewMode)());
  (0, _react.useEffect)(() => setRetry(results.length), [results.length]);
  const url = (0, _helpers.getImageUrl)(path, imageName);
  const image = result.images?.[imageName];
  const canApprove = Boolean(image && approved[imageName] != retry - 1 && result.status != 'success');
  const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
  const imagesWithError = result.images ? Object.keys(result.images).filter(imageName => result.status != 'success' && approved[imageName] != retry - 1 && (result.images || {})[imageName]?.error != null) : [];
  const handleApprove = () => onImageApprove(id, retry - 1, imageName);
  const handleChangeViewMode = mode => {
    localStorage.setItem(_viewMode.VIEW_MODE_KEY, mode);
    setViewMode(mode);
  };
  return /*#__PURE__*/_react.default.createElement(Container, {
    height: height
  }, /*#__PURE__*/_react.default.createElement(HeaderContainer, null, /*#__PURE__*/_react.default.createElement(_PageHeader.PageHeader, {
    title: path,
    images: result.images,
    errorMessage: result.error,
    showViewModes: hasDiffAndExpect,
    viewMode: viewMode,
    onViewModeChange: handleChangeViewMode,
    onImageChange: setImageName,
    showTitle: showTitle,
    imagesWithError: imagesWithError
  })), /*#__PURE__*/_react.default.createElement(BodyContainer, null, /*#__PURE__*/_react.default.createElement(_components.ScrollArea, {
    vertical: true
  }, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(ImagesViewContainer, {
    theme: theme
  }, image ? /*#__PURE__*/_react.default.createElement(_ImagesView.ImagesView, {
    url: url,
    image: image,
    canApprove: canApprove,
    mode: viewMode
  }) : /*#__PURE__*/_react.default.createElement(_components.Placeholder, null, `Image ${imageName} not found`))))), results.length ? /*#__PURE__*/_react.default.createElement(FooterContainer, null, /*#__PURE__*/_react.default.createElement(_PageFooter.PageFooter, {
    canApprove: canApprove,
    retry: retry,
    retriesCount: results.length,
    onRetryChange: setRetry,
    onApprove: handleApprove
  })) : null);
}
const ResultsPage = exports.ResultsPage = (0, _theming.withTheme)(ResultsPageInternal);