import { Placeholder } from '@storybook/components';
import React, { useEffect, useState } from 'react';
import { Panel } from './Panel';
export const Addon = _ref => {
  let {
    active,
    browser,
    manager
  } = _ref;
  const [tests, setTests] = useState([]);
  const [selectedTestId, setSelectedTestId] = useState(manager.selectedTestId);
  useEffect(() => {
    if (active) {
      manager.setActiveBrowser(browser);
      const browserTests = manager.getTestsByStoryIdAndBrowser(manager.activeBrowser);
      setTests(browserTests);
    }
  }, [active, browser, manager]);
  useEffect(() => {
    const unsubscribe = manager.onChangeTest(testId => {
      setSelectedTestId(testId);
      const status = manager.getTestsByStoryIdAndBrowser(manager.activeBrowser);
      setTests(status);
    });
    return unsubscribe;
  }, [manager]);
  useEffect(() => {
    const unsubscribe = manager.onUpdateStatus(() => {
      setTests(manager.getTestsByStoryIdAndBrowser(manager.activeBrowser));
    });
    return unsubscribe;
  }, [manager, browser]);
  return active ? tests.length ? /*#__PURE__*/React.createElement(Panel, {
    tests: tests,
    selectedTestId: selectedTestId,
    onChangeTest: manager.setSelectedTestId,
    onImageApprove: manager.onImageApprove
  }) : /*#__PURE__*/React.createElement(Placeholder, null, "No test results") : null;
};