import { render, tree } from 'deku'
import element from 'virtual-element'
import itemSelection from 'item-selection'

const lithuanianIslands = [
  'Bažnytėlė Island', 'Briedžiai Island', 'Jonava Neris Island',
  'Kiaulės Nugara', 'Kiemas Island', 'Kubiliai Island',
  'Nemunas Island', 'Ragininkai Island', 'Rusnė Island',
  'Pilis Island', 'Triušiai Island', 'Vytinė',
  'Žingelinė', 'Žvėrynas Neris Island'
]

const List = {
  // initialise the selection. nothing is selected by default.
  initialState(props) {
    return {
      selection: itemSelection(props.items)
    }
  },
  render({ props, state }, setState) {
    const selection = state.selection
    const onMouseDown = index => e => {
      // these events map straight to the different itemSelection methods.
      // because the itemSelection is immutable, and all methods return new
      // instances, we can pass the new selection straight to setState and
      // rerender.
      if (e.shiftKey) {
        setState({ selection: selection.selectRange(index) })
      } else if (e.ctrlKey) {
        setState({ selection: selection.selectToggle(index) })
      } else {
        setState({ selection: selection.select(index) })
      }
      // prevent the browser from selecting a text range, too.
      e.preventDefault()
    }
    return (
      <div>
        {/* retrieve all selected items using .get(), or selected indices using .getIndices(). */}
        <p>Selected: {selection.get().join(', ') || 'None! click some items below:'}</p>
        <ul class="list">
          {props.items.map((island, i) => {
            // check if an item is selected using .isSelected(). .isSelected() uses
            // `===` to check if the given item is in the selection, so it might give a
            // false positive if your list contains the same string twice, for example.
            // you can also use .isSelectedIndex(i) in that case, because indices are
            // always unique.
            const selected = selection.isSelected(island)
            return (
              <li class={`list-item ${selected ? 'is-selected' : ''}`}
                  onMouseDown={onMouseDown(i)}>
                {island}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

render(
  tree(<List items={lithuanianIslands} />),
  document.querySelector('#example')
)

@@ -1,12 +1,32 @@
+/** @jsx element */%0A
 import %7B ren
@@ -518,16 +518,17 @@
 ialState
+ 
 (props) 
@@ -605,16 +605,17 @@
   render
+ 
 (%7B props
@@ -1548,14 +1548,14 @@
 ass=
-%22
+'
 list
-%22
+'
 %3E%0A  
@@ -2068,16 +2068,32 @@
      %3Cli
+%0A               
  class=%7B
@@ -2154,18 +2154,16 @@
         
-  
 onMouseD
@@ -2182,16 +2182,31 @@
 Down(i)%7D
+%0A              
 %3E%0A      

fix code style in example.js