import ScrollArea from './index.vue'

export default {
  title: 'The Design system/Scroll area',
  component: ScrollArea,
  tags: ['autodocs'],
  args: {
    hasHorizontalScroll: true,
    hasVerticalScroll: true,
  },
  argTypes: {
    hasHorizontalScroll: { control: 'boolean' },
    hasVerticalScroll: { control: 'boolean' },
    horizontalScrollPosition: { control: 'select', options: ['top', 'bottom'] },
    verticalScrollPosition: { control: 'select', options: ['left', 'right'] },
  },
}

const Template = (args) => ({
  props: Object.keys(args),
  components: { ScrollArea },
  render() {
    return (
      <div style="height: 400px; width: 500px;">
        <ScrollArea {...args}>
          <div style="height: 2000px;; width: 2000px">
            { [...Array(100)].map(() => 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit').join(' ') }
          </div>
        </ScrollArea>
      </div>
    )
  },
})

export const Primary = Template.bind({})