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

import { IconButton } from '../IconButton/IconButton';

import { Tooltip } from './Tooltip';

const meta: Meta<typeof Tooltip> = {
  title: 'UI kit/Tooltip',
  component: Tooltip,
  tags: ['autodocs'],
  argTypes: {
    children: { control: { disable: true } },
  },
};

export default meta;
type Story = StoryObj<typeof Tooltip>;

const decorators: Story['decorators'] = [
  Story => (
    <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'center', minHeight: '200px' }}>
      <Story />
    </div>
  ),
];

export const Default: Story = {
  args: {
    children: <IconButton ghost icon='shp-info' />,
    content: 'When was the last time you drank water?',
  },
  decorators,
};

export const Critical: Story = {
  args: {
    content: 'You should drink water',
    children: <IconButton ghost icon='shp-alert' variant='destructive' />,
  },
  decorators,
};

export const AroundText: Story = {
  args: {
    content: 'I like to be around text',
    children: 'I am text with a tooltip',
  },
  decorators,
};

export const LeftPlacement: Story = {
  args: {
    children: <IconButton ghost icon='shp-info' />,
    placement: 'left',
    content: 'I like left',
  },
  decorators,
};

export const RightPlacement: Story = {
  args: {
    children: <IconButton ghost icon='shp-info' />,
    placement: 'right',
    content: 'I like right',
  },
  decorators,
};

export const BottomPlacement: Story = {
  args: {
    children: <IconButton ghost icon='shp-info' />,
    placement: 'bottom',
    content: 'I like bottom',
  },
  decorators,
};

export const LargeContentWithJSX: Story = {
  args: {
    children: <IconButton ghost icon='shp-info' />,
    content: (
      <>
        <strong>Lorem</strong> ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui sem, fermentum vitae,
        sagittis id, malesuada in, quam. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Praesent in mauris
        eu tortor porttitor accumsan. Nullam eget nisl. Fusce wisi. Nullam feugiat, turpis at pulvinar vulputate, erat
        libero tristique tellus, <a href='#'>clickable link</a> nec bibendum odio risus sit amet ante. Nullam sapien
        sem, ornare ac, nonummy non, lobortis a enim.,
      </>
    ),
  },
  decorators,
};