import * as React                                  from 'react';
import { withKnobs }                               from '@storybook/addon-knobs';
import { Description, Divider, Dropdown, Wrapper } from '../../..';
import { Tooltip }                                 from './tooltip.component';

export default {
    title:      'GEENEE-UI/Tooltip',
    component:  Dropdown,
    decorators: [ withKnobs ]
};

export const Playground = () => (
    <Wrapper row>
        <Tooltip
            message="hui"
            margin="xl"
        >
            <Description>Small text</Description>
        </Tooltip>
        <Divider margin="xl" />
        <Tooltip
            message="Whether to adjust popup placement automatically when popup is off screen"
            margin="xl"
            menuWidth="200px"
        >
            <Description>Large text</Description>
        </Tooltip>
        <Divider margin="xl" />
        <Tooltip
            message={ (
                <Wrapper>
                    <Wrapper overflow="hidden">
                        <img
                            src="https://ucarecdn.com/d53f0b16-656e-452b-8268-d4f4ee77cd5b/13Transfer.png"
                            alt=""
                            width="100%"
                        />
                    </Wrapper>
                    <Wrapper padding="sm" margin="xs">
                        <Description>
                                Whether to adjust popup placement automatically when popup is off screen
                        </Description>
                    </Wrapper>
                </Wrapper>
            ) }
            margin="xl"
            menuWidth="200px"
        >
            <Description>With image</Description>
        </Tooltip>
    </Wrapper>

);