import React from 'react'
import { inject, observer } from 'mobx-react'
import DraggableTab from './Tab/DraggableTab'
import { blue } from 'material-ui/colors'

@inject('dragStore')
@inject('tabStore')
@observer
export default class DragPreview extends React.Component {
  render () {
    const {
      tabStore: { sources },
      dragStore: { dragging },
      setDragPreview
    } = this.props
    let content
    if (dragging) {
      content = sources.map((tab) => (
        <DraggableTab key={tab.id} {...tab} faked />
      ))
    }
    return (
      <div
        ref={setDragPreview}
        style={{
          width: '64%',
          position: 'fixed',
          background: blue[100],
          textAlign: 'center',
          top: 2048
        }}>
        <h3>
          {sources.length} tab{sources.length > 1 && 's'}
          <br />
          drop out ➤ new window
        </h3>
        {content}
      </div>
    )
  }
}

@@ -398,55 +398,196 @@
     
-let content%0A    if (dragging) %7B%0A      content =
+const head = dragging && (%0A      %3Ch3%3E%0A        %7Bsources.length%7D tab%7Bsources.length %3E 1 && 's'%7D%0A        %3Cbr /%3E%0A        drop out %E2%9E%A4 new window%0A      %3C/h3%3E%0A    )%0A    const content = dragging &&
  sou
@@ -606,18 +606,16 @@
 b) =%3E (%0A
-  
       %3CD
@@ -665,19 +665,11 @@
     
-  
 ))%0A
-    %7D%0A
     
@@ -895,133 +895,14 @@
     
-%3Ch3%3E%0A          %7Bsources.length%7D tab%7Bsources.length %3E 1 && 's'%7D%0A          %3Cbr /%3E%0A          drop out %E2%9E%A4 new window%0A        %3C/h3%3E
+%7Bhead%7D
 %0A   

Update syntax for DragPreview