import React from 'react';
import { Loader } from '@storybook/components';
import { ResultsPage } from '../../shared/components/ResultsPage';
import { styled } from '@storybook/theming';
import { getTestPath } from '../../shared/helpers';
import TestSelect from './TestSelect';
const Wrapper = styled.div(_ref => {
  let {
    isRunning
  } = _ref;
  return {
    opacity: isRunning ? 0.5 : 1,
    height: '100%'
  };
});
const TestSelectContainer = styled.div(_ref2 => {
  let {
    theme
  } = _ref2;
  return {
    padding: '8px',
    border: `1px solid ${theme.appBorderColor}`
  };
});
export 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.createElement("div", null, tests.length > 1 && /*#__PURE__*/React.createElement(TestSelectContainer, null, /*#__PURE__*/React.createElement(TestSelect, {
    tests: tests,
    selectedTestId: selectedTestId,
    onChangeTest: onChangeTest
  })), isRunning && /*#__PURE__*/React.createElement(Loader, null), result?.results?.length ? /*#__PURE__*/React.createElement(Wrapper, {
    isRunning: isRunning
  }, /*#__PURE__*/React.createElement(ResultsPage, {
    height: '100%',
    key: `${result.id}_${result.results?.length ?? 0}` // TODO
    ,
    id: result.id,
    path: getTestPath(result) // TODO Memo?
    ,
    results: result.results,
    approved: result.approved,
    onImageApprove: onImageApprove
  })) : null);
};