import type { Meta, StoryObj } from '@storybook/react-vite'
import React from 'react'

import { DocsTemplate } from '../../../.storybook'
import ScrollingContainer from './ScrollingContainer'

const meta: Meta<typeof ScrollingContainer> = {
  title: 'Components/ScrollingContainer',
  component: ScrollingContainer,
  argTypes: {
    children: { control: false },
  },
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>ScrollingContainer</code> is a versatile wrapper
              designed for content that requires vertical scrolling. This
              component comes with a visually appealing gradient fade above and
              below the children content, enhancing the scrolling experience.
              The gradient effect can be optionally toggled on or off based on
              specific design preferences.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              NOTE: This component is currently restricted to usage in the
              Library. It is not available to be used outside of the Library.
              This may change depending on the need of other applications.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof ScrollingContainer>

const Template: Story = {
  render: (args) => (
    <div className='rounded-sm border border-medium-purple px-4'>
      <ScrollingContainer {...args} />
    </div>
  ),
}

const children = (
  <div className='flex flex-col gap-4 text-xs'>
    {[...Array(20)].map((_, index) => (
      <div key={index}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam,
        urna vitae aliquam mattis, neque ipsum bibendum turpis, id finibus
        lectus m auris eget nunc.
      </div>
    ))}
  </div>
)

export const Basic: Story = {
  ...Template,
  args: {
    children,
  },
}

export const WithoutGradients: Story = {
  ...Template,
  args: {
    children,
    hideGradients: true,
  },
}

export const Height100: Story = {
  ...Template,
  args: {
    children,
    height: 100,
  },
}