import {
  SortableContainer,
  SortableElement,
  SortableHandle
} from 'react-sortable-hoc'
import { dragHandle, sortableItem, sortableList } from '../styles'

const DragHandle = SortableHandle(() => (
  <div className='listitem-drag-handle'>
    <style jsx>{dragHandle}</style>
  </div>
))

const SortableItem = SortableElement(({ item }: any) => (
  <li>
    <DragHandle />
    <div className='listitem-content'>{item}</div>

    <style jsx>{sortableItem}</style>
  </li>
))

const SortableList = SortableContainer(({ items }: { items: any[] }) => {
  return (
    <ul>
      {items.map((item: any, index: number) => {
        return <SortableItem key={item.key} index={index} item={item} />
      })}
      <style jsx>{sortableList}</style>
    </ul>
  )
})

export default SortableList
