import { $$ } from '../dom'
import { Form, FormRow, Modal, MultiSelect } from '../ui'

export default function CitationModal (props) {
  const { document, node, mode } = props
  const confirmLabel = mode === 'edit' ? 'Update' : 'Create'
  const title = mode === 'edit' ? 'Edit Citation' : 'Create Citation'
  const value = mode === 'edit' ? node.target : []

  const root = document.root
  const referencesList = root.resolve('references')

  const modalProps = { title, cancelLabel: 'Cancel', confirmLabel, size: 'large' }
  return $$(Modal, modalProps,
    $$(Form, {},
      $$(FormRow, {},
        $$(MultiSelect, {
          options: referencesList.map(ref => {
            return { value: ref.id, label: ref.content }
          }),
          value,
          label: 'Add Reference',
          placeholder: 'Please select one or more references'
        }).ref('references')
      )
    )
  )
}

@@ -4,16 +4,27 @@
 ort %7B $$
+, Component
  %7D from 
@@ -110,16 +110,13 @@
 ult 
-function
+class
  Cit
@@ -130,18 +130,53 @@
 dal 
-(props
+extends Component %7B%0A  getInitialState (
 ) %7B%0A
+  
   co
@@ -181,24 +181,155 @@
 const %7B 
+mode, node %7D = this.props%0A    const value = mode === 'edit' ? node.target : %5B%5D%0A    return %7B value %7D%0A  %7D%0A%0A  render () %7B%0A    const %7B 
 document
 , node, 
@@ -320,22 +320,16 @@
 document
-, node
 , mode %7D
@@ -331,22 +331,62 @@
 ode %7D = 
+this.
 props%0A
+    const %7B value %7D = this.state%0A  
   const 
@@ -438,16 +438,18 @@
 Create'%0A
+  
   const 
@@ -514,60 +514,11 @@
 on'%0A
+%0A
   
-const value = mode === 'edit' ? node.target : %5B%5D%0A%0A
   co
@@ -542,16 +542,18 @@
 nt.root%0A
+  
   const 
@@ -596,17 +596,65 @@
 ences')%0A
-%0A
+    const disableConfirm = value.length === 0%0A%0A  
   const 
@@ -711,16 +711,32 @@
 rmLabel,
+ disableConfirm,
  size: '
@@ -744,16 +744,18 @@
 arge' %7D%0A
+  
   return
@@ -777,24 +777,26 @@
 lProps,%0A    
+ 
+ 
 $$(Form, %7B%7D,
@@ -792,24 +792,26 @@
 $(Form, %7B%7D,%0A
+  
       $$(For
@@ -828,16 +828,18 @@
         
+ 
+ 
 $$(Multi
@@ -848,16 +848,18 @@
 lect, %7B%0A
+  
         
@@ -905,24 +905,26 @@
             
+ 
+ 
 return %7B val
@@ -966,16 +966,18 @@
         
+  
 %7D),%0A    
@@ -986,15 +986,19 @@
     
+ 
+ 
 value,%0A
+  
     
@@ -1027,16 +1027,18 @@
 rence',%0A
+  
         
@@ -1090,17 +1090,66 @@
 erences'
-%0A
+,%0A            onchange: this._updateReferencess%0A  
         
@@ -1179,18 +1179,22 @@
     
-)%0A
+  )%0A  
     )%0A  
 )%0A%7D%0A
@@ -1189,12 +1189,126 @@
     )%0A  
-)
+  )%0A  %7D%0A%0A  _updateReferencess () %7B%0A    const value = this.refs.references.val()%0A    this.extendState(%7B value %7D)%0A  %7D
 %0A%7D%0A

Disable modal confirmation without values.