// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Tooltip } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './TOOLTIP.mkd';
import { Box } from '../../../primitives';
import { Button } from '../../actions/button';

storiesOf('Core/Overlays/Tooltip', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <Box
        style={{
          height: '300px',
        }}
      >
        <Tooltip
          placement="bottom"
          reference={({ ref, referenceProps }) => (
            <Button {...referenceProps} ref={ref}>
              Reference element
            </Button>
          )}
        >
          You cannot access this client until they log in for the first time and
          provide consent
        </Tooltip>
      </Box>
    )),
  )
  .add(
    '4 placements',
    withDocs(docs)(() => (
      <Box
        style={{
          height: '700px',
          width: '700px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        {['left', 'right', 'top', 'bottom'].map(location => (
          <Tooltip
            placement={location}
            reference={({ ref, referenceProps }) => (
              <Button
                style={{ marginBottom: '20px' }}
                {...referenceProps}
                ref={ref}
              >
                {location}
              </Button>
            )}
          >
            You cannot access this client until they log in for the first time
            and provide consent
          </Tooltip>
        ))}
      </Box>
    )),
  );
