"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Panel = void 0;
var _react = _interopRequireDefault(require("react"));
var _components = require("@storybook/components");
var _ResultsPage = require("../../shared/components/ResultsPage");
var _theming = require("@storybook/theming");
var _helpers = require("../../shared/helpers");
var _TestSelect = _interopRequireDefault(require("./TestSelect"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Wrapper = _theming.styled.div(_ref => {
  let {
    isRunning
  } = _ref;
  return {
    opacity: isRunning ? 0.5 : 1,
    height: '100%'
  };
});
const TestSelectContainer = _theming.styled.div(_ref2 => {
  let {
    theme
  } = _ref2;
  return {
    padding: '8px',
    border: `1px solid ${theme.appBorderColor}`
  };
});
const Panel = _ref3 => {
  let {
    tests,
    selectedTestId,
    onChangeTest,
    onImageApprove
  } = _ref3;
  const result = tests.find(x => x.id === selectedTestId);
  const isRunning = result?.status === 'running';
  return /*#__PURE__*/_react.default.createElement("div", null, tests.length > 1 && /*#__PURE__*/_react.default.createElement(TestSelectContainer, null, /*#__PURE__*/_react.default.createElement(_TestSelect.default, {
    tests: tests,
    selectedTestId: selectedTestId,
    onChangeTest: onChangeTest
  })), isRunning && /*#__PURE__*/_react.default.createElement(_components.Loader, null), result?.results?.length ? /*#__PURE__*/_react.default.createElement(Wrapper, {
    isRunning: isRunning
  }, /*#__PURE__*/_react.default.createElement(_ResultsPage.ResultsPage, {
    height: '100%',
    key: `${result.id}_${result.results?.length ?? 0}` // TODO
    ,
    id: result.id,
    path: (0, _helpers.getTestPath)(result) // TODO Memo?
    ,
    results: result.results,
    approved: result.approved,
    onImageApprove: onImageApprove
  })) : null);
};
exports.Panel = Panel;