import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Tooltip from './Tooltip'
import {
  text,
  boolean,
  number,
  object,
  array,
  date,
  color,
  button
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import styled from 'styled-components';
import {Row} from '../baseComponents'


const Styles = styled('div')`${props=>`
.tooltip{
  ${props.styles}
}
`}`

storiesOf('Tooltip', module)
  .add('Tooltip',
     withInfo('info text')(
          () => (
            <Styles styles={text('Styles',`.tooltip-container
              {
                .tooltip-text{

                }
              }
              `)}>
            	<Tooltip
                className='tooltip'
                tooltipTitle={'title'}
                hoverElement={<button>Touch me</button>}
                tooltipText={'text'}
              />
            </Styles>
          )
     ))
     .add('CutomTooltip',
        withInfo('info text')(
             () => (
               <Tooltip
                   className='tooltip'
                   tooltipTitle={'title'}
                   hoverElement={<button>Touch me</button>}
                   component={() => (
                    <div>
                      <div>A</div>
                      <div style={{width:'100px',background:'white', height:'20px'}}></div>
                      <div>donut</div>
                    </div>
                    )}
                   place="right"
                 />
             )
        ))
