import React, {ComponentStory, ComponentMeta} from '@storybook/react';
import {Tooltip} from '../src/tooltip';

export default {
    title: 'Display/Tooltip',
    component: Tooltip,
    args: {
        enabled: true,
        duration: 10_000,
        type: 'normal'
    },
    parameters: {
        layout: 'centered'
    },
    argTypes: {
        type: {
            control: 'radio',
            options: ['normal', 'error']
        },
        duration: {
            type: 'number'
        }
    }
} as ComponentMeta<typeof Tooltip>;

export const WithText: ComponentStory<typeof Tooltip> = (args) => (
    <h1>
        Lorem ipsum dolor sit amet
        <Tooltip {...args}>Here's a tip</Tooltip>
    </h1>
)

export const WithButton: ComponentStory<typeof Tooltip> = (args) => (
    <button>
        Button
        <Tooltip {...args}>Here's a tip</Tooltip>
    </button>
)

export const ErrorTip: ComponentStory<typeof Tooltip> = (args) => (
    <button>
        Button
        <Tooltip {...args}>Here's an error tip</Tooltip>
    </button>
)
ErrorTip.args = {
    type: 'error'
}

export const StyleCustomized: ComponentStory<typeof Tooltip> = (args) => (
    <h1>
        Lorem ipsum dolor sit amet
        <Tooltip {...args }>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam ex laudantium sint dignissimos quisquam, incidunt doloremque enim et similique nihil! Qui eligendi ad commodi aliquid minus animi est adipisci excepturi!</Tooltip>
    </h1>
)
StyleCustomized.args = {
    style: {
        maxWidth: 120,
        wordBreak: 'break-all',
    }
}