// @flow
import React from 'react';
import styled from 'styled-components';
import { Box } from '../../../primitives';
import { Span } from '../../typography';
import { UnstyledButton } from '../../behaviors';
import { SecondaryButton } from '../../actions/secondary-button';
import { TertiaryButton } from '../../actions/tertiary-button';
import { Tooltip } from './tooltip.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';
import docs from './tooltip.mdx';

export default {
  component: Tooltip,
  title: 'Components/Overlays/Tooltip',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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

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

export const Default = () => (
  <NormalBox>
    <Tooltip
      placement="bottom"
      reference={({ ref, referenceProps }) => (
        <SecondaryButton {...referenceProps} ref={ref}>
          Reference element
        </SecondaryButton>
      )}
    >
      You cannot access this client until they log in for the first time and
      provide consent
    </Tooltip>
  </NormalBox>
);

export const FourPlacements = () => (
  <PlacementsBox>
    {['left', 'right', 'top', 'bottom'].map((location) => (
      <Tooltip
        key={location}
        placement={location}
        reference={({ ref, referenceProps }) => (
          <TertiaryButton spacing="mb2" {...referenceProps} ref={ref}>
            {location}
          </TertiaryButton>
        )}
      >
        You cannot access this client until they log in for the first time and
        provide consent
      </Tooltip>
    ))}
  </PlacementsBox>
);

export const UnstyledButtonTriger = () => (
  <NormalBox>
    <Tooltip
      placement="bottom"
      reference={({ ref, referenceProps }) => (
        <UnstyledButton {...referenceProps} ref={ref}>
          <Span underlined>Reference element</Span>
        </UnstyledButton>
      )}
    >
      You cannot access this client until they log in for the first time and
      provide consent
    </Tooltip>
  </NormalBox>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker
      Component={Tooltip}
      placement="bottom"
      isVisible
      reference={({ ref, referenceProps }) => (
        <TertiaryButton {...referenceProps} ref={ref}>
          Click
        </TertiaryButton>
      )}
    >
      Hello
    </MarginChecker>
    <PaddingChecker
      Component={Tooltip}
      placement="bottom"
      isVisible={false}
      reference={({ ref, referenceProps }) => (
        <TertiaryButton {...referenceProps} ref={ref}>
          Click
        </TertiaryButton>
      )}
    >
      Hello
    </PaddingChecker>
  </>
);

export const MixinsStacked = () => (
  <StackedChecker
    Component={Tooltip}
    placement="bottom"
    isVisible
    reference={({ ref, referenceProps }) => (
      <TertiaryButton {...referenceProps} ref={ref}>
        Click
      </TertiaryButton>
    )}
  >
    Hello
  </StackedChecker>
);

export const SpanTriggerElement = () => (
  <Tooltip
    placement="bottom"
    reference={({ ref, referenceProps }) => (
      <UnstyledButton {...referenceProps} ref={ref}>
        <Span dottedUnderline>
          Indicate a tooltip with some underlined text
        </Span>
      </UnstyledButton>
    )}
  >
    Look at all this additional information you were missing out on!
  </Tooltip>
);
