import React, { Fragment } from 'react';
import { styled } from '@storybook/theming';
import { ScrollArea } from './ScrollArea';

const Block = styled.span({
  display: 'inline-block',
  height: 40,
  width: 40,
  marginTop: 5,
  marginRight: 5,
  background: 'silver',
  lineHeight: '40px',
  textAlign: 'center',
  fontSize: 9,
});

const Wrapper = styled.div({
  whiteSpace: 'nowrap',
  lineHeight: '0px',
  width: 500,
  height: 500,
  overflow: 'hidden',
});

const list = (filler: (data: number) => JSX.Element) => {
  const data = [];

  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < 20; i++) {
    data.push(filler(i));
  }

  return data;
};

export default {
  component: ScrollArea,
  title: 'Basics/ScrollArea',
  decorators: [(storyFn: () => any) => <Wrapper>{storyFn()}</Wrapper>],
};

export const Vertical = () => (
  <ScrollArea vertical>
    {list((i) => (
      <Fragment key={i}>
        <Block>{i}</Block>
        <br />
      </Fragment>
    ))}
  </ScrollArea>
);

export const Horizontal = () => (
  <ScrollArea horizontal>
    {list((i) => (
      <Block key={i}>{i}</Block>
    ))}
  </ScrollArea>
);

export const Both = () => (
  <ScrollArea horizontal vertical>
    {list((i) => (
      <Fragment key={i}>
        {list((ii) => (
          <Block key={ii}>{ii * i}</Block>
        ))}
        <br />
      </Fragment>
    ))}
  </ScrollArea>
);

export const WithOuterBorder = () => (
  <ScrollArea horizontal vertical>
    <div
      style={{
        width: 2000,
        height: 2000,
        border: '10px solid orangered',
        background: `url('data:image/png;base64,[encoded data, 4476 characters]')`,
      }}
    />
  </ScrollArea>
);
