import React from 'react'
import {storiesOf} from '@storybook/react'
import debug from './helpers/debug'

import Board from '../src'

const data = require('./data/base.json')

storiesOf('Drag-n-Drop', module)
  .add(
    'Basic',
    () => {
      const handleDragStart = (cardId, laneId) => {
        debug('drag started')
        debug(`cardId: ${cardId}`)
        debug(`laneId: ${laneId}`)
      }

      const handleDragEnd = (cardId, sourceLaneId, targetLaneId, position, card) => {
        debug('drag ended')
        debug(`cardId: ${cardId}`)
        debug(`sourceLaneId: ${sourceLaneId}`)
        debug(`targetLaneId: ${targetLaneId}`)
        debug(`newPosition: ${position}`)
        debug(`cardDetails:`)
        debug(card)
      }

      const handleLaneDragStart = laneId => {
        debug(`lane drag started for ${laneId}`)
      }

      const handleLaneDragEnd = (removedIndex, addedIndex, {id}) => {
        debug(`lane drag ended from position ${removedIndex} for laneId=${id}`)
        debug(`New lane position: ${addedIndex}`)
      }

      const shouldReceiveNewData = nextData => {
        debug('data has changed')
        debug(nextData)
      }

      return (
        <Board
          data={data}
          draggable
          onDataChange={shouldReceiveNewData}
          handleDragStart={handleDragStart}
          handleDragEnd={handleDragEnd}
          handleLaneDragStart={handleLaneDragStart}
          handleLaneDragEnd={handleLaneDragEnd}
        />
      )
    },
    {info: 'A demonstration of onDragStart and onDragEnd hooks for card and lanes'}
  )
  .add(
    'Drag Styling',
    () => {
      return <Board data={data} cardDragClass="draggingCard" laneDragClass="draggingLane" draggable />
    },
    {info: 'Modifying appearance of dragged card'}
  )

@@ -1165,24 +1165,210 @@
 a)%0A      %7D%0A%0A
+      const onCardMoveAcrossLanes = (fromLaneId, toLaneId, cardId, addedIndex) =%3E %7B%0A        debug(%60onCardMoveAcrossLanes: $%7BfromLaneId%7D, $%7BtoLaneId%7D, $%7BcardId%7D, $%7BaddedIndex%7D%60)%0A      %7D%0A%0A
       return
@@ -1427,16 +1427,72 @@
 aggable%0A
+          onCardMoveAcrossLanes=%7BonCardMoveAcrossLanes%7D%0A
         

Add onCardMoveAcrossLanes example to storybook