//
// Copyright 2022 DXOS.org
//

import { type Meta, type StoryObj } from '@storybook/react-vite';
import React from 'react';

import { random } from '@dxos/random';

import { withTheme } from '../../testing';
import { Button } from '../Button';
import { Tooltip } from './Tooltip';

type StoryArgs = {
  tooltips: { label: string; content: string }[];
  defaultOpen?: boolean;
};

const DefaultStory = ({ tooltips, defaultOpen }: StoryArgs) => {
  return (
    <Tooltip.Provider defaultOpen={defaultOpen}>
      <div className='w-32'>
        {tooltips.map(({ label, content }, i) => (
          <Tooltip.Trigger asChild key={i} content={content} side='right'>
            <Button classNames='block w-full'>{label}</Button>
          </Tooltip.Trigger>
        ))}
      </div>
    </Tooltip.Provider>
  );
};

const meta = {
  title: 'ui/react-ui-core/components/Tooltip',
  component: Tooltip as any,
  render: DefaultStory,
  decorators: [withTheme()],
} satisfies Meta<typeof DefaultStory>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    tooltips: [
      {
        label: 'Tooltip trigger',
        content: 'This is the tooltip content',
      },
    ],
  },
};

export const DefaultOpen: Story = {
  args: {
    defaultOpen: true,
    tooltips: [
      {
        label: 'Tooltip trigger',
        content: 'This is the tooltip content',
      },
    ],
  },
};

export const StressTest: Story = {
  args: {
    defaultOpen: true,
    tooltips: random.helpers.multiple(
      () => ({
        label: random.lorem.words(2),
        content: random.lorem.words(5),
      }),
      { count: 32 },
    ),
  },
};