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

import ScrollingContainer from '../ScrollingContainer/ScrollingContainer'
import { SelectDisplayRow } from '../Selects/SelectDisplay/SelectDisplay'
import { capitalize } from '../../services/HelperServiceTyped'
import DraggableListComponent from '../DragAndDrop/DraggableList'
import DragHandle from '../DragHandle/DragHandle'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof DraggableListComponent> = {
  title: 'Components/DraggableList',
  component: DraggableListComponent,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>DraggableList</code> component enables users to reorder
              items in a list through drag and drop interactions. It provides a
              flexible container for creating sortable lists with customizable
              item rendering and drag handles.
            </span>
          }
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof DraggableListComponent>

const DraggableList = () => {
  const listItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
  const [items, setItems] = React.useState(listItems)
  const callout = useCallback((newList) => {
    setItems(newList)
  }, [])

  return (
    <ScrollingContainer>
      <div className='px-4'>
        <DraggableListComponent
          listItems={items}
          callout={callout}
          overrideDOMManipulation={false}
        >
          {listItems.map((item, index) => (
            <div
              style={{
                display: 'grid',
                justifyContent: 'space-between',
                gridTemplateColumns: 'repeat(2, max-content)',
              }}
              key={index}
            >
              <SelectDisplayRow
                option={{
                  name: item,
                  label: capitalize(item),
                }}
                callout={() => null}
              />
              <DragHandle />
            </div>
          ))}
        </DraggableListComponent>
      </div>
    </ScrollingContainer>
  )
}

const Template: Story = {
  render: () => <DraggableList />,
}

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