import { Button, ThemeOverride, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';
import { ResizeableEl } from './Tooltip.styles';
export default {
    title: 'Core/Tooltip',
    component: Tooltip,
    excludeStories: ['ConfigurableTooltip']
};
export const TooltipDemo = () => {
    const [el, setEl] = useElement();
    return (<>
      <Button ref={setEl}>Hover me</Button>

      {el && (<Tooltip target={el}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque
          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non
          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.
        </Tooltip>)}
    </>);
};
export const ConfigurableTooltip = (args) => {
    const [el, setEl] = useElement();
    return (<ThemeOverride theme={{
            components: {
                tooltip: {
                    'foreground-color': args.foregroundColor,
                    'background-color': args.backgroundColor
                }
            }
        }}>
      <Button ref={setEl}>Hover me</Button>

      {el && (<Tooltip target={el}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque
          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non
          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.
        </Tooltip>)}
    </ThemeOverride>);
};
ConfigurableTooltip.args = {
    foregroundColor: '#f5f5f5',
    backgroundColor: '#3f3f3f'
};
ConfigurableTooltip.argTypes = {
    foregroundColor: { control: { type: 'color' } },
    backgroundColor: { control: { type: 'color' } }
};
export const SmartTooltip = () => {
    const [el1, setEl1] = useElement();
    const [el2, setEl2] = useElement();
    const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';
    const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';
    return (<Flex container={{ direction: 'column', gap: 4 }}>
      <ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>
      {el1 && (<Tooltip target={el1} smart showDelay='none' hideDelay='none'>
          {textContent1}
        </Tooltip>)}

      <Button as={ResizeableEl} variant='link' ref={setEl2}>
        {textContent2}
      </Button>
      {el2 && (<Tooltip target={el2} smart showDelay='none' hideDelay='none'>
          {textContent2}
        </Tooltip>)}
    </Flex>);
};
//# sourceMappingURL=Tooltip.stories.jsx.map