import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
import { styled } from '@storybook/theming';
import React from 'react';
import { getEmojiByTestStatus } from '../utils';
const LinkIconContainer = styled.span(_ref => {
  let {
    theme
  } = _ref;
  return {
    display: 'inline-block',
    width: '20px',
    color: theme.color.defaultText,
    textAlign: 'center'
  };
});
export default function TestSelect(props) {
  const testName = props.tests.find(x => x.id === props.selectedTestId)?.testName ?? '';
  return /*#__PURE__*/React.createElement(WithTooltip, {
    trigger: "click",
    placement: "bottom",
    closeOnClick: true,
    tooltip: _ref2 => {
      let {
        onHide
      } = _ref2;
      return /*#__PURE__*/React.createElement(TooltipLinkList, {
        links: props.tests.map(x => ({
          id: x.id,
          title: x.testName ?? '',
          active: props.selectedTestId === x.id,
          onClick: () => {
            props.onChangeTest(x.id);
            onHide();
          },
          left: /*#__PURE__*/React.createElement(LinkIconContainer, null, getEmojiByTestStatus(x.status, x.skip))
        }))
      });
    }
  }, /*#__PURE__*/React.createElement(Button, {
    outline: true,
    small: true
  }, /*#__PURE__*/React.createElement(Icons, {
    icon: "menu"
  }), testName));
}