import { Meta, StoryObj } from '@storybook/react-webpack5';
import { userEvent, within } from 'storybook/test';
import Button from '../button';
import Tooltip from './Tooltip';
import { withVariantConfig } from '../../.storybook/helpers';

const meta: Meta<typeof Tooltip> = {
  component: Tooltip,
  tags: ['!autodocs', '!manifest'],
  title: 'Dialogs/Tooltip/Tests',
  args: {
    label: 'This is the content',
    position: 'bottom',
  },
  render: (args) => (
    <div className="text-xs-center" style={{ flexBasis: '150px' }}>
      <Tooltip {...args}>
        <Button>Hover me</Button>
      </Tooltip>
    </div>
  ),
};
export default meta;

type Story = StoryObj<typeof Tooltip>;

export const OpenedTooltip: Story = {
  parameters: {
    chromatic: {
      delay: 1000,
    },
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.hover(canvas.getByRole('button'));
  },
};

export const OpenedTooltipDark: Story = {
  ...OpenedTooltip,
  ...withVariantConfig(['dark'], OpenedTooltip),
};