import React from 'react';

import { ComponentMeta, ComponentStory } from '@storybook/react';

import { Button } from 'components/Button/Button';

import { Tooltip } from './Tooltip';

export default {
  title: 'ReactComponentLibrary/Tooltip',
  component: Tooltip,
  decorators: [
    (Story): JSX.Element => (
      <div className="centered-layout">
        <Story />
      </div>
    ),
  ],
} as ComponentMeta<typeof Tooltip>;

const Template: ComponentStory<typeof Tooltip> = (props) => (
  <Tooltip {...props}>
    <Button>Hover me</Button>
  </Tooltip>
);

export const Default = Template.bind({});
Default.args = {
  tooltip: 'Tooltip content',
};

export const LongText = Template.bind({});
LongText.args = {
  tooltip: `
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
    We have very long text content inside tooltip
  `,
};

export const CustomElement = Template.bind({});
CustomElement.args = {
  tooltip: (
    <div>
      <span>
        <b>
          <i>Tooltip content</i>
        </b>
      </span>
    </div>
  ),
};