/* eslint-disable react-hooks/rules-of-hooks */
import { select } from '@storybook/addon-knobs';
import { useState } from '@storybook/addons';
import * as React from 'react';
import Button from '../Button';
import Positioner from '.';
import Box from '../Layout/Box';

export default {
  title: 'Components|Positioner',
  component: Positioner,
};

export const index = () => {
  const [shown, setShown] = useState(true);
  const position = select(
    'Position',
    {
      top: 'top',
      'top-left': 'top-left',
      'top-right': 'top-right',
      bottom: 'bottom',
      'bottom-left': 'bottom-left',
      'bottom-right': 'bottom-right',
      left: 'left',
      right: 'right',
    },
    'top',
  );

  return (
    <center>
      <br />
      <br />
      scroll up
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />
      <Positioner
        position={position}
        shown={shown}
        renderContent={({ ref, style }) => (
          <div ref={ref} style={{ ...style, visibility: shown ? 'visible' : 'hidden' }}>
            <Box gap="large" background="Light Neutral 1">
              I&rsquo;m positioned!
            </Box>
          </div>
        )}
      >
        {({ ref }) => (
          <span ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
            <Button appearance="secondary" onClick={() => setShown((prev) => !prev)}>
              {shown ? 'Close' : 'Open'}
            </Button>
          </span>
        )}
      </Positioner>
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
      <br />
      <br />*
    </center>
  );
};