// @flow
import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { Tooltip } from './index';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './TOOLTIP.mkd';
import { Box } from '../../../primitives';
import { Button } from '../../actions/button';

const NormalBox = styled(Box)`
  height: 300px;
`;

const PlacementsBox = styled(Box)`
  height: 700px;
  width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

storiesOf('Core/Overlays/Tooltip', module)
  .addDecorator(withInfo(configDocs(docs, Tooltip)))

  .add('normal', () => (
    <NormalBox>
      <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>
    </NormalBox>
  ))
  .add('4 placements', () => (
    <PlacementsBox>
      {['left', 'right', 'top', 'bottom'].map((location) => (
        <Tooltip
          placement={location}
          reference={({ ref, referenceProps }) => (
            <Button spacing="mb2" {...referenceProps} ref={ref}>
              {location}
            </Button>
          )}
        >
          You cannot access this client until they log in for the first time and
          provide consent
        </Tooltip>
      ))}
    </PlacementsBox>
  ));
