import { useState } from 'react'
import { pug } from 'startupjs'
import { DragDropProvider, Draggable, Droppable } from './'
import Div from '../Div'
import Row from '../Row'
import ScrollView from '../ScrollView'
import H5 from '../typography/headers/H5'
import Span from '../typography/Span'

```jsx example
const [data, setData] = useState([
  {
    id: '8c778cc6-c1dd-4dde-84a2-e3000fca8ffd',
    title: 'Plan',
    items: [
      { id: '55bd3da0-bed0-451f-8ac3-3b9a19a699fb', text: 'Quarterly newsletter and other' },
      { id: '8374e61f-0b95-4a4a-8282-48f9316f4157', text: 'Read a book' },
      { id: '13febede-112d-4d53-8e6f-a83a184e229d', text: 'Buy a new gaming laptop' },
      { id: '11aabadc-113d-4d53-8e6f-a83a184e229d', text: 'Buy a new gaming 2' },
      { id: '12febadc-112d-4d53-8e6f-a83a184e229d', text: 'Buy a new gaming 3' }
    ]
  },
  {
    id: '2d503db0-c209-4f47-8b6a-96ef3ec6ade7',
    title: 'WIP',
    items: [
      { id: '4174c327-eea0-4ec7-96fa-2dc319c40fd6', text: 'Interview John H.', style: {} },
      { id: 'a2b3af0e-e482-468e-a681-3ab8303b208f', text: 'Sumbit updates to mobile storefronts', style: {} }
    ]
  },
  {
    id: 'be64729e-29d8-4399-88cd-f1ee3c48b0d8',
    title: 'Complete',
    items: [
      { id: 'c539db23-77f3-49f8-93f0-2a10f1c1f1b7', text: 'Schedule meeting with Alex', style: {} },
      { id: 'a0d82bf2-72f4-48ba-9294-b835862519ce', text: 'Homepage refresh', style: {} }
    ]
  }
])

const dropStyle = {
  marginRight: 16,
  backgroundColor: '#ebecf0',
  padding: 8
}

const dragStyle = {
  width: 200,
  backgroundColor: '#ffffff',
  marginTop: 4,
  marginBottom: 4,
  paddingTop: 8,
  paddingBottom: 8,
  paddingLeft: 16,
  paddingRight: 16,
  border: '1px solid #dddddd',
  borderRadius: 4
}

const arrInsertEl = (arr, index, item) => arr.splice(index, 0, item)
const arrRemoveEl = (arr, index) => arr.splice(index, 1)

function onDragEnd ({
  dragId,
  dropId,
  dropHoverId,
  hoverIndex
}) {
  const dropIndex = data.findIndex(drop => drop.id === dropId)
  const dropHoverIndex = data.findIndex(drop => drop.id === dropHoverId)
  const dragIndex = data[dropIndex].items.findIndex(drag => drag.id === dragId)

  const drag = data[dropIndex].items[dragIndex]

  arrInsertEl(data[dropHoverIndex].items, hoverIndex, drag)
  if (dropHoverId === dropId && hoverIndex < dragIndex) {
    arrRemoveEl(data[dropIndex].items, dragIndex + 1)
  } else {
    arrRemoveEl(data[dropIndex].items, dragIndex)
  }

  setData([...data])
}

return pug`
  DragDropProvider
    ScrollView(horizontal=true)
      Row
        each drop in data
          Droppable(
            key=drop.id
            style=dropStyle
            dropId=drop.id
          )
            each drag in drop.items
              Draggable(
                key=drag.id
                style=dragStyle
                dragId=drag.id
                onDragEnd=onDragEnd
              )
                Span= drag.text
`
```